How to sync two standalone p-paginators in angular?

Question

I am struggling with this. I have two separate p-paginator components in my angular component. I want to make them sync with each other. So, if I click on any of these, the other should also be updated.

I tried to fire the changePage() event for the paginator(that hasn't changed) when the user change the other one and vice versa, hoping to make them synchronize but that didn't end well as it formed an infinite loop.

Any help regarding would be highly appreciated. Thanks

@ViewChild('paginatorTop', { static: true }) paginatorTop: Paginator;
@ViewChild('paginatorBottom', { static: true }) paginatorBottom: Paginator;

onTopPageChange(e) {
    this.filter.pageNo = e.page + 1;
    this.getProducts();
  }
  onBottomPageChange(e) {
    this.paginatorTop.changePage(e.page);
    this.filter.pageNo = e.page + 1;
    this.getProducts();
  }

<!-- paginator 1 -->
<p-paginator #paginatorTop [rows]="perRow" showCurrentPageReport="true"
          currentPageReportTemplate="Showing {currentPage} of {totalPages}" (onPageChange)="onTopPageChange($event)"
          [totalRecords]="total" styleClass="pr-0">
        </p-paginator>
        
        
        
<!-- Dynamic data coming from an API -->
        
        
<p-paginator #paginatorBottom [rows]="perRow" showCurrentPageReport="true"
      currentPageReportTemplate="Showing {currentPage} of {totalPages}" (onPageChange)="onBottomPageChange($event)"
      [totalRecords]="total" styleClass="pr-0">
    </p-paginator>

why not make them call the same function. just onPageChange and apply the change on both of them each time. — Taha Zgued, Oct 27 '22 at 14:28
Hey, thanks for commenting. Can you please elaborate? Can you edit the given code snippet? — Junaid, Oct 27 '22 at 14:47

score 0 · Answer 1 · answered Oct 28 '22 at 15:11

0

Replace your 2 functions with 1 function that does this

  onPageChange(e) {
    this.paginatorTop.changePage(e.page);
    this.paginatorBottom.changePage(e.page);
    this.filter.pageNo = e.page + 1;
    this.getProducts();
  }

answered Oct 28 '22 at 15:11

Taha Zgued

1,088
12
18

Did same. But it is resulting in an infinite loop. – Junaid Oct 31 '22 at 11:29

How to sync two standalone p-paginators in angular?

1 Answers1