fix(table): use static queries for examples (#15483)

Author: andrewseguin

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

@@ -9,11 +9,14 @@ export interface UserData {
 }
 
 /** Constants used to fill up our data base. */
-const COLORS: string[] = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
-  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
-const NAMES: string[] = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
-  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
-  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
+const COLORS: string[] = [
+  'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',
+  'aqua', 'blue', 'navy', 'black', 'gray'
+];
+const NAMES: string[] = [
+  'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',
+  'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
+];
 
 /**
  * @title Data table with sorting, pagination, and filtering.
@@ -27,8 +30,8 @@ export class TableOverviewExample implements OnInit {
   displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
   dataSource: MatTableDataSource<UserData>;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
 
   constructor() {
     // Create 100 users
@@ -54,8 +57,7 @@ export class TableOverviewExample implements OnInit {
 
 /** Builds and returns a new User. */
 function createNewUser(id: number): UserData {
-  const name =
-      NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
+  const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
       NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
 
   return {

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

@@ -13,7 +13,7 @@ export class TablePaginationExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;

src/material-examples/table-simple-column/table-simple-column-example.ts

@@ -1,11 +1,11 @@
-import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
 import {
-    MatColumnDef,
-    MatSort,
-    MatSortHeader,
-    MatTable,
-    MatTableDataSource
+  MatColumnDef,
+  MatSort,
+  MatSortHeader,
+  MatTable,
+  MatTableDataSource
 } from '@angular/material';
 
 export interface PeriodicElement {
@@ -41,7 +41,7 @@ export class TableSimpleColumnExample implements OnInit {
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
   getWeight = (data: PeriodicElement) => '~' + data.weight;
 
-  @ViewChild('sort') sort: MatSort;
+  @ViewChild('sort', {static: true}) sort: MatSort;
 
   ngOnInit() {
     this.dataSource.sort = this.sort;
@@ -75,7 +75,9 @@ export class TableSimpleColumnExample implements OnInit {
 export class SimpleColumn<T> implements OnDestroy, OnInit {
   /** Column name that should be used to reference this column. */
   @Input()
-  get name(): string { return this._name; }
+  get name(): string {
+    return this._name;
+  }
   set name(name: string) {
     this._name = name;
     this.columnDef.name = name;
@@ -96,21 +98,23 @@ export class SimpleColumn<T> implements OnDestroy, OnInit {
   @Input() dataAccessor: ((data: T, name: string) => string);
 
   /** Alignment of the cell values. */
-  @Input() align: 'before' | 'after' = 'before';
+  @Input() align: 'before'|'after' = 'before';
 
   /** Whether the column is sortable */
   @Input()
-  get sortable(): boolean { return this._sortable; }
+  get sortable(): boolean {
+    return this._sortable;
+  }
   set sortable(sortable: boolean) {
     this._sortable = coerceBooleanProperty(sortable);
   }
   _sortable: boolean;
 
-  @ViewChild(MatColumnDef) columnDef: MatColumnDef;
+  @ViewChild(MatColumnDef, {static: true}) columnDef: MatColumnDef;
 
   @ViewChild(MatSortHeader) sortHeader: MatSortHeader;
 
-  constructor(@Optional() public table: MatTable<any>) { }
+  constructor(@Optional() public table: MatTable<any>) {}
 
   ngOnInit() {
     if (this.table) {

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

@@ -33,7 +33,7 @@ export class TableSortingExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource(ELEMENT_DATA);
 
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
 
   ngOnInit() {
     this.dataSource.sort = this.sort;

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

@@ -1,3 +1,4 @@
+import {DataSource} from '@angular/cdk/collections';
 import {
   AfterContentInit,
   Component,
@@ -15,7 +16,6 @@ import {
   MatTable,
   MatTableDataSource
 } from '@angular/material';
-import {DataSource} from '@angular/cdk/collections';
 
 export interface PeriodicElement {
   name: string;
@@ -49,7 +49,7 @@ export class TableWrappedExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  @ViewChild('sort') sort: MatSort;
+  @ViewChild('sort', {static: true}) sort: MatSort;
 
   ngOnInit() {
     this.dataSource.sort = this.sort;
@@ -70,11 +70,11 @@ export class TableWrappedExample implements OnInit {
   `]
 })
 export class WrapperTable<T> implements AfterContentInit {
-  @ContentChildren(MatHeaderRowDef) headerRowDefs:  QueryList<MatHeaderRowDef>;
+  @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
   @ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
   @ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;
 
-  @ViewChild(MatTable) table: MatTable<T>;
+  @ViewChild(MatTable, {static: true}) table: MatTable<T>;
 
   @Input() columns: string[];