diff --git a/src/material-examples/table-overview/table-overview-example.ts b/src/material-examples/table-overview/table-overview-example.ts index 62eec1ce5564..6429eb1498aa 100644 --- a/src/material-examples/table-overview/table-overview-example.ts +++ b/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; - @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 { diff --git a/src/material-examples/table-pagination/table-pagination-example.ts b/src/material-examples/table-pagination/table-pagination-example.ts index e4cad373a8ea..7827fb258a79 100644 --- a/src/material-examples/table-pagination/table-pagination-example.ts +++ b/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(ELEMENT_DATA); - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; ngOnInit() { this.dataSource.paginator = this.paginator; diff --git a/src/material-examples/table-simple-column/table-simple-column-example.ts b/src/material-examples/table-simple-column/table-simple-column-example.ts index 05c53f89767a..ddbdea733434 100644 --- a/src/material-examples/table-simple-column/table-simple-column-example.ts +++ b/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(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 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 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) { } + constructor(@Optional() public table: MatTable) {} ngOnInit() { if (this.table) { diff --git a/src/material-examples/table-sorting/table-sorting-example.ts b/src/material-examples/table-sorting/table-sorting-example.ts index cc992b0eee29..304fee4dcdbb 100644 --- a/src/material-examples/table-sorting/table-sorting-example.ts +++ b/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; diff --git a/src/material-examples/table-wrapped/table-wrapped-example.ts b/src/material-examples/table-wrapped/table-wrapped-example.ts index 38e95d63685b..53b86758d291 100644 --- a/src/material-examples/table-wrapped/table-wrapped-example.ts +++ b/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(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 implements AfterContentInit { - @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList; + @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList; @ContentChildren(MatRowDef) rowDefs: QueryList>; @ContentChildren(MatColumnDef) columnDefs: QueryList; - @ViewChild(MatTable) table: MatTable; + @ViewChild(MatTable, {static: true}) table: MatTable; @Input() columns: string[];