Skip to content

Commit 19856e6

Browse files
andrewseguinmmalerba
authored andcommitted
fix(table): use static queries for examples (#15483)
1 parent 100a04c commit 19856e6

File tree

5 files changed

+33
-27
lines changed

5 files changed

+33
-27
lines changed

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,14 @@ export interface UserData {
99
}
1010

1111
/** Constants used to fill up our data base. */
12-
const COLORS: string[] = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
13-
'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
14-
const NAMES: string[] = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
15-
'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
16-
'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
12+
const COLORS: string[] = [
13+
'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',
14+
'aqua', 'blue', 'navy', 'black', 'gray'
15+
];
16+
const NAMES: string[] = [
17+
'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',
18+
'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
19+
];
1720

1821
/**
1922
* @title Data table with sorting, pagination, and filtering.
@@ -27,8 +30,8 @@ export class TableOverviewExample implements OnInit {
2730
displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
2831
dataSource: MatTableDataSource<UserData>;
2932

30-
@ViewChild(MatPaginator) paginator: MatPaginator;
31-
@ViewChild(MatSort) sort: MatSort;
33+
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
34+
@ViewChild(MatSort, {static: true}) sort: MatSort;
3235

3336
constructor() {
3437
// Create 100 users
@@ -54,8 +57,7 @@ export class TableOverviewExample implements OnInit {
5457

5558
/** Builds and returns a new User. */
5659
function createNewUser(id: number): UserData {
57-
const name =
58-
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
60+
const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
5961
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
6062

6163
return {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export class TablePaginationExample implements OnInit {
1313
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
1414
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
1515

16-
@ViewChild(MatPaginator) paginator: MatPaginator;
16+
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
1717

1818
ngOnInit() {
1919
this.dataSource.paginator = this.paginator;

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

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
21
import {coerceBooleanProperty} from '@angular/cdk/coercion';
2+
import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
33
import {
4-
MatColumnDef,
5-
MatSort,
6-
MatSortHeader,
7-
MatTable,
8-
MatTableDataSource
4+
MatColumnDef,
5+
MatSort,
6+
MatSortHeader,
7+
MatTable,
8+
MatTableDataSource
99
} from '@angular/material';
1010

1111
export interface PeriodicElement {
@@ -41,7 +41,7 @@ export class TableSimpleColumnExample implements OnInit {
4141
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
4242
getWeight = (data: PeriodicElement) => '~' + data.weight;
4343

44-
@ViewChild('sort') sort: MatSort;
44+
@ViewChild('sort', {static: true}) sort: MatSort;
4545

4646
ngOnInit() {
4747
this.dataSource.sort = this.sort;
@@ -75,7 +75,9 @@ export class TableSimpleColumnExample implements OnInit {
7575
export class SimpleColumn<T> implements OnDestroy, OnInit {
7676
/** Column name that should be used to reference this column. */
7777
@Input()
78-
get name(): string { return this._name; }
78+
get name(): string {
79+
return this._name;
80+
}
7981
set name(name: string) {
8082
this._name = name;
8183
this.columnDef.name = name;
@@ -96,21 +98,23 @@ export class SimpleColumn<T> implements OnDestroy, OnInit {
9698
@Input() dataAccessor: ((data: T, name: string) => string);
9799

98100
/** Alignment of the cell values. */
99-
@Input() align: 'before' | 'after' = 'before';
101+
@Input() align: 'before'|'after' = 'before';
100102

101103
/** Whether the column is sortable */
102104
@Input()
103-
get sortable(): boolean { return this._sortable; }
105+
get sortable(): boolean {
106+
return this._sortable;
107+
}
104108
set sortable(sortable: boolean) {
105109
this._sortable = coerceBooleanProperty(sortable);
106110
}
107111
_sortable: boolean;
108112

109-
@ViewChild(MatColumnDef) columnDef: MatColumnDef;
113+
@ViewChild(MatColumnDef, {static: true}) columnDef: MatColumnDef;
110114

111115
@ViewChild(MatSortHeader) sortHeader: MatSortHeader;
112116

113-
constructor(@Optional() public table: MatTable<any>) { }
117+
constructor(@Optional() public table: MatTable<any>) {}
114118

115119
ngOnInit() {
116120
if (this.table) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class TableSortingExample implements OnInit {
3333
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
3434
dataSource = new MatTableDataSource(ELEMENT_DATA);
3535

36-
@ViewChild(MatSort) sort: MatSort;
36+
@ViewChild(MatSort, {static: true}) sort: MatSort;
3737

3838
ngOnInit() {
3939
this.dataSource.sort = this.sort;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {DataSource} from '@angular/cdk/collections';
12
import {
23
AfterContentInit,
34
Component,
@@ -15,7 +16,6 @@ import {
1516
MatTable,
1617
MatTableDataSource
1718
} from '@angular/material';
18-
import {DataSource} from '@angular/cdk/collections';
1919

2020
export interface PeriodicElement {
2121
name: string;
@@ -49,7 +49,7 @@ export class TableWrappedExample implements OnInit {
4949
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
5050
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
5151

52-
@ViewChild('sort') sort: MatSort;
52+
@ViewChild('sort', {static: true}) sort: MatSort;
5353

5454
ngOnInit() {
5555
this.dataSource.sort = this.sort;
@@ -70,11 +70,11 @@ export class TableWrappedExample implements OnInit {
7070
`]
7171
})
7272
export class WrapperTable<T> implements AfterContentInit {
73-
@ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
73+
@ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
7474
@ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
7575
@ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;
7676

77-
@ViewChild(MatTable) table: MatTable<T>;
77+
@ViewChild(MatTable, {static: true}) table: MatTable<T>;
7878

7979
@Input() columns: string[];
8080

0 commit comments

Comments
 (0)