docs: reduce reliance on static queries in live examples

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;
   }
 }