docs: reduce reliance on static queries in live examples (#20452)

Removes (almost) all of the static queries from the live examples since it's something people shouldn't be depending on. There's one place left which can't be removed without changes in the table code.

Author: crisbeto

src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts

@@ -18,7 +18,7 @@ import {
 })
 export class CdkPortalOverviewExample implements AfterViewInit {
   @ViewChild('templatePortalContent') templatePortalContent: TemplateRef<unknown>;
-  @ViewChild('domPortalContent', {static: true}) domPortalContent: ElementRef<HTMLElement>;
+  @ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;
 
   selectedPortal: Portal<any>;
   componentPortal: ComponentPortal<ComponentPortalExample>;

src/components-examples/material/table/table-overview/table-overview-example.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {MatPaginator} from '@angular/material/paginator';
 import {MatSort} from '@angular/material/sort';
 import {MatTableDataSource} from '@angular/material/table';
@@ -28,12 +28,12 @@ const NAMES: string[] = [
   styleUrls: ['table-overview-example.css'],
   templateUrl: 'table-overview-example.html',
 })
-export class TableOverviewExample implements OnInit {
+export class TableOverviewExample implements AfterViewInit {
   displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
   dataSource: MatTableDataSource<UserData>;
 
-  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
-  @ViewChild(MatSort, {static: true}) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
 
   constructor() {
     // Create 100 users
@@ -43,7 +43,7 @@ export class TableOverviewExample implements OnInit {
     this.dataSource = new MatTableDataSource(users);
   }
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
   }

src/components-examples/material/table/table-pagination/table-pagination-example.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {MatPaginator} from '@angular/material/paginator';
 import {MatTableDataSource} from '@angular/material/table';
 
@@ -10,13 +10,13 @@ import {MatTableDataSource} from '@angular/material/table';
   styleUrls: ['table-pagination-example.css'],
   templateUrl: 'table-pagination-example.html',
 })
-export class TablePaginationExample implements OnInit {
+export class TablePaginationExample implements AfterViewInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
   }
 }

src/components-examples/material/table/table-sorting/table-sorting-example.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {MatSort} from '@angular/material/sort';
 import {MatTableDataSource} from '@angular/material/table';
 
@@ -30,13 +30,13 @@ const ELEMENT_DATA: PeriodicElement[] = [
   styleUrls: ['table-sorting-example.css'],
   templateUrl: 'table-sorting-example.html',
 })
-export class TableSortingExample implements OnInit {
+export class TableSortingExample implements AfterViewInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource(ELEMENT_DATA);
 
-  @ViewChild(MatSort, {static: true}) sort: MatSort;
+  @ViewChild(MatSort) sort: MatSort;
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this.dataSource.sort = this.sort;
   }
 }

src/components-examples/material/table/table-wrapped/table-wrapped-example.ts

@@ -4,7 +4,7 @@ import {
   Component,
   ContentChildren,
   Input,
-  OnInit,
+  AfterViewInit,
   QueryList,
   ViewChild
 } from '@angular/core';
@@ -45,13 +45,13 @@ const ELEMENT_DATA: PeriodicElement[] = [
   styleUrls: ['table-wrapped-example.css'],
   templateUrl: 'table-wrapped-example.html',
 })
-export class TableWrappedExample implements OnInit {
+export class TableWrappedExample implements AfterViewInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  @ViewChild('sort', {static: true}) sort: MatSort;
+  @ViewChild('sort') sort: MatSort;
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this.dataSource.sort = this.sort;
   }
 }