diff --git a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts index d0709d7b9317..4a89c3b88888 100644 --- a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts +++ b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts @@ -40,8 +40,10 @@ const EXAMPLE_DATA: <%= classify(name) %>Item[] = [ */ export class <%= classify(name) %>DataSource extends DataSource<<%= classify(name) %>Item> { data: <%= classify(name) %>Item[] = EXAMPLE_DATA; + paginator: MatPaginator; + sort: MatSort; - constructor(private paginator: MatPaginator, private sort: MatSort) { + constructor() { super(); } @@ -59,9 +61,6 @@ export class <%= classify(name) %>DataSource extends DataSource<<%= classify(nam this.sort.sortChange ]; - // Set the paginator's length - this.paginator.length = this.data.length; - return merge(...dataMutations).pipe(map(() => { return this.getPagedData(this.getSortedData([...this.data])); })); diff --git a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html index 20c4502525eb..fc6952eda10d 100644 --- a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +++ b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html @@ -1,5 +1,5 @@
- +
@@ -17,7 +17,7 @@
Id
diff --git a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts index f1478b1a60d6..4e522dc28e01 100644 --- a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +++ b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts @@ -1,6 +1,6 @@ -import { AfterViewInit, Component, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; +import { AfterViewInit, Component, OnInit, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; import { MatPaginator, MatSort } from '@angular/material'; -import { <%= classify(name) %>DataSource } from './<%= dasherize(name) %>-datasource'; +import { <%= classify(name) %>DataSource, <%= classify(name) %>Item } from './<%= dasherize(name) %>-datasource'; @Component({ selector: '<%= selector %>',<% if(inlineTemplate) { %> @@ -15,15 +15,22 @@ import { <%= classify(name) %>DataSource } from './<%= dasherize(name) %>-dataso encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>, changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %> }) -export class <%= classify(name) %>Component implements AfterViewInit { +export class <%= classify(name) %>Component implements AfterViewInit, OnInit { @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatTable) table: MatTable<<%= classify(name) %>Item>; dataSource: <%= classify(name) %>DataSource; /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ displayedColumns = ['id', 'name']; + ngOnInit() { + this.dataSource = new <%= classify(name) %>DataSource(); + } + ngAfterViewInit() { - this.dataSource = new <%= classify(name) %>DataSource(this.paginator, this.sort); + this.dataSource.sort = this.sort; + this.dataSource.paginator = this.paginator; + this.table.dataSource = this.dataSource; } }