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 @@
-
+
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;
}
}