fix(table): schematic generates code that throws an exception

fix exception when instantiating MatPaginator before dataSource defined
fix ExpressionChangedAfterItHasBeenCheckedError caused by above
- first initialize the template w/o dataSource & w/ a sort and paginator
- then get the references to the template's MatSort and MatPaginator
- then set the data source's sort and paginator
- then set the table's data source from the component

Fixes #15788

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]));
     }));

src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -1,5 +1,5 @@
 <div class="mat-elevation-z8">
-  <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
+  <table mat-table class="full-width-table" matSort aria-label="Elements">
     <!-- Id Column -->
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
@@ -17,7 +17,7 @@
   </table>
 
   <mat-paginator #paginator
-      [length]="dataSource.data.length"
+      [length]="dataSource?.data.length"
       [pageIndex]="0"
       [pageSize]="50"
       [pageSizeOptions]="[25, 50, 100, 250]">

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