From 25ad1a2d4aaa1ea40b814a98546c749962654659 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sat, 29 Aug 2020 14:00:07 +0200 Subject: [PATCH] docs: reduce reliance on static queries in live examples 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. --- .../cdk-portal-overview/cdk-portal-overview-example.ts | 2 +- .../table/table-overview/table-overview-example.ts | 10 +++++----- .../table/table-pagination/table-pagination-example.ts | 8 ++++---- .../table/table-sorting/table-sorting-example.ts | 8 ++++---- .../table/table-wrapped/table-wrapped-example.ts | 8 ++++---- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts b/src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts index 87bdd2071dba..8db50bd9fdee 100644 --- a/src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts +++ b/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; - @ViewChild('domPortalContent', {static: true}) domPortalContent: ElementRef; + @ViewChild('domPortalContent') domPortalContent: ElementRef; selectedPortal: Portal; componentPortal: ComponentPortal; diff --git a/src/components-examples/material/table/table-overview/table-overview-example.ts b/src/components-examples/material/table/table-overview/table-overview-example.ts index beb6b2a6f35b..a72d5eed0e7e 100644 --- a/src/components-examples/material/table/table-overview/table-overview-example.ts +++ b/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; - @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; } diff --git a/src/components-examples/material/table/table-pagination/table-pagination-example.ts b/src/components-examples/material/table/table-pagination/table-pagination-example.ts index 42e36faf0333..1634c917dd8b 100644 --- a/src/components-examples/material/table/table-pagination/table-pagination-example.ts +++ b/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(ELEMENT_DATA); - @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; + @ViewChild(MatPaginator) paginator: MatPaginator; - ngOnInit() { + ngAfterViewInit() { this.dataSource.paginator = this.paginator; } } diff --git a/src/components-examples/material/table/table-sorting/table-sorting-example.ts b/src/components-examples/material/table/table-sorting/table-sorting-example.ts index 8d6b6d4b630d..bf1d12bd1741 100644 --- a/src/components-examples/material/table/table-sorting/table-sorting-example.ts +++ b/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; } } diff --git a/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts b/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts index ac60453971d2..41b9462a77eb 100644 --- a/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts +++ b/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(ELEMENT_DATA); - @ViewChild('sort', {static: true}) sort: MatSort; + @ViewChild('sort') sort: MatSort; - ngOnInit() { + ngAfterViewInit() { this.dataSource.sort = this.sort; } }