title: Angular mat-table pagination not working, entire data is loaded on First page of mat-table
body: <p>I have use Angular Material table, i have bind data source from ts file,but all the data is loaded on very first page, pagination is not working.I have two more table, which are on same page,same problem for other tables too.</p>
  
  <p>I have tried </p>
  
  <pre><code>setTimeout(() =&gt; this.dataSource.paginator = this.paginator);
  </code></pre>
  
  <p>and  </p>
  
  <pre><code>ngAfterViewInit() {
     this.dataSource.paginator = this.paginator
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsers"&gt;
        &lt;ng-container matColumnDef="checked"&gt;
          &lt;mat-header-cell fxFlex="10" (click)="selectAllUsers()" *matHeaderCellDef&gt;
            &lt;mat-checkbox [(ngModel)]="checkedAllUsers"&gt;&lt;/mat-checkbox&gt;
          &lt;/mat-header-cell&gt;
          &lt;mat-cell fxFlex="10" *matCellDef="let element"&gt;
            &lt;mat-checkbox [(ngModel)]="element.checked"&gt;&lt;/mat-checkbox&gt;
          &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="firstName"&gt;
          &lt;mat-header-cell fxFlex="25" *matHeaderCellDef&gt; First Name &lt;/mat-header-cell&gt;
          &lt;mat-cell fxFlex="25" *matCellDef="let element"&gt; {{element.firstName}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="lastName"&gt;
          &lt;mat-header-cell fxFlex="25" *matHeaderCellDef&gt; Last Name &lt;/mat-header-cell&gt;
          &lt;mat-cell fxFlex="25" *matCellDef="let element"&gt; {{element.lastName}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="email"&gt;
          &lt;mat-header-cell fxFlex="30" *matHeaderCellDef&gt; Email &lt;/mat-header-cell&gt;
          &lt;mat-cell fxFlex="30" *matCellDef="let element"&gt; {{element.email}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="actions"&gt;
          &lt;mat-header-cell fxFlex="10" *matHeaderCellDef&gt; Action &lt;/mat-header-cell&gt;
          &lt;mat-cell fxFlex="10" *matCellDef="let row; let i=index;"&gt;
            &lt;button mat-icon-button class="viewButton" (click)="view(i, row.id, row.title, row.state, row.url, row.created_at, row.updated_at)"&gt;
              &lt;mat-icon aria-label="Delete"&gt;remove_red_eye&lt;/mat-icon&gt;
            &lt;/button&gt;
          &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;mat-header-row *matHeaderRowDef="allUsersColumns"&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef="let row; columns: allUsersColumns;"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
      &lt;mat-paginator #allUsersPaginatorr [pageSizeOptions]="[10,20,30]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  </code></pre>
  
  <p>TS Code:</p>
  
  <pre><code> @ViewChild(MatPaginator) paginator: MatPaginator;
  
   allUsersColumns: string[] = ['checked', 'firstName', 'lastName', 'email', 
  'actions'];
  allUsersDataSource = new MatTableDataSource&lt;any&gt;();
   allUsers: any[] = [
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
   'd@gmail.com' },
    { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
   'w@yahoo.in' },
    { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
   'randy@gmail.com' },
    { checked: true, firstName: 'Chad', lastName: 'Spongla', email: 
     'c@redif.com' },
     { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
    'd@gmail.com' },
    { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
    'w@yahoo.in' },
    { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
    'randy@gmail.com' },
    { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
   'c@redif.com' },
    { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
   'd@gmail.com' },
      { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
   'w@yahoo.in' },
    { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
   'c@redif.com' },
    { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
   'd@gmail.com' },
    { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
   'w@yahoo.in' }
   ];
  ngOnInit() {
   this.allUsersDataSource = new MatTableDataSource(this.allUsers);
    this.allUsersDataSource.paginator = this.paginator;
  }
  </code></pre>