Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to synchronize two Angular Material paginators?

I have on my design page two paginator. When I add two paginators - their data is not synchronized. https://material.angular.io/components/paginator

https://plnkr.co/edit/w5ZuXnfIgmKW1nWgyf3Y?p=preview

<mat-paginator [length]="length"
               [pageSize]="10">
</mat-paginator>

<mat-paginator [length]="length"
              [pageSize]="10">
</mat-paginator>

How can this be achieved?

like image 705
Vitaliy.Makogon Avatar asked Mar 08 '23 12:03

Vitaliy.Makogon


1 Answers

This may be an old question, still found a now-working solution to this:

<mat-paginator #paginatorTop 
               [length]="length"
               [pageSize]="10"
                (page)="paginatorBottom.pageIndex = $event.pageIndex">
</mat-paginator>

<mat-paginator #paginatorBottom 
              [length]="length"
              [pageSize]="10"
              (page)="paginatorTop.pageIndex = $event.pageIndex">
</mat-paginator>

Maybe this still helps someone

like image 105
Joniras Avatar answered Mar 16 '23 07:03

Joniras