Material design paginator doesn't work with tables dynamically generated

Question

I am trying to generate multiple tables with multiple columns using material table and it worked correctly. But the problem arises when paging the results of each table. It seems that it does not take the reference of each table, then all the paginators are set to 0.

Here is my code in stackblitz:

https://stackblitz.com/edit/angular-k8qfd3?file=src%2Fapp%2Fapp.component.ts

Answer 1

try this set the pagination length in the ngAfterViewInit hook.

ngAfterViewInit() {

this.paginationLength = this.tableData.length;

}

in the template:

<mat-paginator [length]="paginationLength"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>