title: Mat-Paginator not working on api based mat-table
body: <p>I'm implementing a mat-table that retrieve information from an API.</p>
  
  <p>The mat-table is showing data as expected.</p>
  
  <p>The mat-paginator is not working.</p>
  
  <p>Below the code I'm using:</p>
  
  <p>Component:</p>
  
  <pre><code>import {DataService} from '../../services/data.service';
  import {Component, ViewChild, AfterViewInit, OnInit} from '@angular/core';
  import {MatPaginator, MatTableDataSource} from '@angular/material';
  
  
  
  @Component({
    selector: 'app-projects',
    templateUrl: './projects.component.html',
    styleUrls: ['./projects.component.css'],
  
  })
  export class ProjectsComponent implements OnInit,AfterViewInit {
    projects: any;
    dataSource = new MatTableDataSource();
    displayedColumns: any;
    length: number;
    pageSize: number=1;
    pageSizeOptions = [1, 5, 10, 50];
    @ViewChild(MatPaginator) paginator: MatPaginator;
    constructor(private dataService: DataService) { 
  
    }
  
  
  
    ngOnInit() {
      console.log("Retrieving projects");
      this.getProjects().then(
        projects =&gt; {
          console.log("Projects retrieved", projects);
          this.projects=projects;
          this.dataSource = this.projects;
          console.log(this.dataSource);
          this.displayedColumns = [
            'prj_id',
            'title',
            'priority_id'
          ];
          this.length=this.projects.length;
  
  
        }
      ).catch(function (data){
        console.log("Rejected", data);
      });
  
    }
  
    ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
    }
  
  
    getProjects(){
      let promise = new Promise((resolve, reject) =&gt; {
        this.dataService.getProjects().subscribe(
          projects =&gt; {
            resolve(projects);
          },
          error =&gt; {
            console.log("error retrieving projects");
            reject("error retrieving projects");
          }
        )
      });
      return promise;
    }
  
  }
  
  export interface Projects {
    prj_id: string;
    title: string;
    priority_id: number;
  }
  </code></pre>
  
  <p>HTML VIEW:</p>
  
  <pre><code>&lt;div fxLayout="column" fxLayoutAlign="center center" &gt;
  
  
      &lt;button mat-raised-button color="primary" &gt;&lt;mat-icon&gt;add&lt;/mat-icon&gt;Project&lt;/button&gt;
  
  &lt;/div&gt;
  &lt;div fxLayout="row" fxLayoutWrap="wrap"&gt;
  
    &lt;div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100"&gt;
        &lt;mat-card&gt;
            &lt;mat-card-content&gt; 
                &lt;mat-card-title backgroundColor="primary"&gt;Projects&lt;/mat-card-title&gt;
                &lt;div class="table-rasponsive"&gt;
                    &lt;mat-table #table [dataSource]="dataSource"&gt;
  
                    &lt;!-- Position Column --&gt;
                    &lt;ng-container matColumnDef="prj_id"&gt;
                      &lt;mat-header-cell *matHeaderCellDef&gt; ID &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element"&gt; {{element.prj_id}} &lt;/mat-cell&gt;
                    &lt;/ng-container&gt;
  
                    &lt;!-- Name Column --&gt;
                    &lt;ng-container matColumnDef="title"&gt;
                      &lt;mat-header-cell *matHeaderCellDef&gt; TITLE &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element"&gt; {{element.title}} &lt;/mat-cell&gt;
                    &lt;/ng-container&gt;
  
                     &lt;!-- Name Column --&gt;
                     &lt;ng-container matColumnDef="priority_id"&gt;
                        &lt;mat-header-cell *matHeaderCellDef&gt; PRIORITY &lt;/mat-header-cell&gt;
                        &lt;mat-cell *matCellDef="let element"&gt; {{element.priority_id}} &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
  
  
                    &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
                    &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
                  &lt;/mat-table&gt;
  
                  &lt;mat-paginator  #paginator
                                  [length]="length"
                                  [pageSize]="pageSize"
                                  [pageSizeOptions]="pageSizeOptions"&gt;
                  &lt;/mat-paginator&gt;
                &lt;/div&gt;    
            &lt;/mat-card-content&gt;
        &lt;/mat-card&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>