Mat-pagination doesnt work with Angular 8

Question

I have a project with pagination options. https://stackblitz.com/edit/angular-sjp8qq

But mat-pagination tag´s properties arent tied up with an app logic. Can someone tell me why, please?

Answer 1

Below is how I got a mat-pagination to work in an application I am working adjusted to fit in with your code, hope this helps.

JS

totalElements = 20;
elementsPerPage = 5;
currentPage = 1;
pageSizeOptions = [5, 10, 20];


fillDataSource() {
 this.arraySource = []; // clear so we can repopulate
 for ( let i = 0; i < this.arraySize; i++) { 
   if (this.elementsPerPage &&  this.currentPage) {
     if (i > (this.elementsPerPage * (this.currentPage - 1)) && i <= (this.elementsPerPage * (this.currentPage))) {
      this.arraySource.push(this.arrayTemplate)
     }
   }
 }
 this.data = new MatTableDataSource(this.arraySource)
}

onChangedPage(pageData: PageEvent) {
 this.currentPage = (pageData.pageIndex + 1);
 this.projectsPerPage = pageData.pageSize;

 this.fillDataSource();
}

HTML

 <mat-paginator
  #paginator
  [length]="totalElements"
  [showFirstLastButtons]="true"
  [pageSizeOptions]="pageSizeOptions"
  [pageSize]="elementsPerPage"
  (click)="onChangedPage($event)">
 </mat-paginator>