title: problems linking paginator to MatTable
body: <p>I’m trying to add pagination to my mat-table in Angular 6. I’m using some of the examples in the link below. But it’s not working:</p>
  
  <p><a href="https://material.angular.io/components/table/examples" rel="nofollow noreferrer">https://material.angular.io/components/table/examples</a></p>
  
  <p>It looks like the mat-table populates with data properly and the paginator appears underneath it properly, but they’re failing to connect together:</p>
  
  <p><a href="https://i.stack.imgur.com/kG7F3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kG7F3.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the paginator is set to 5 records per page, but there are more than records on the current page in the table. It also says 0 out of 0, which further indicates a failure to link to the table.</p>
  
  <p>Here’s my html:</p>
  
  <pre><code>    &lt;mat-table #table [dataSource]="dataSource" class="animate topMatDataTable”&gt;
  …
       &lt;/mat-table&gt;
        &lt;mat-paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="5" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  </code></pre>
  
  <p>Here’s my ts code:</p>
  
  <pre><code>export class DynamicDataListComponent implements OnInit {
  …
    dataSource : MatTableDataSource&lt;any&gt;;
  …
    @ViewChild(MatPaginator) paginator : MatPaginator;
  …
    ngOnInit() {
  …
      this.loadEndpoints();
    }
  
    async loadEndpoints() {
  …
        const endpointListObs = await this._dataStorageService.getAPIEndpointList();
        endpointListObs.subscribe((endpointList: any[]) =&gt; {
          this.dataSource = new MatTableDataSource&lt;any&gt;(endpointList);
          this.dataSource.paginator = this.paginator;
  …
        });
  …
    }
  …
  }
  </code></pre>
  
  <p>Can anyone tell what I’m doing wrong?</p>
  
  <p>Thanks.</p>