Skip to content
Advertisement

How do I trigger the (page) event on a mat-paginator only when pageIndex changes in Angular?

I’m trying to get the pageIndex every time the user goes to another page of the paginator. This code currently works, but the event also gets triggered when the pageSize changes.

 onPaginateChange(event) {
    console.log(event.pageIndex);
  }
  <mat-paginator [pageSizeOptions]="[10, 5, 20]" [pageIndex]="pageIndex" (page)="onPaginateChange($event)"
    showFirstLastButtons></mat-paginator>

Advertisement

Answer

AFAIK the event will always be triggered but you could compare the previous pageIndex to find out if it has changed.

onPaginateChange(event) {
  if (pageIndex !== event.pageIndex) {
    console.log(event.pageIndex);
    pageIndex = event.pageIndex;
  }
}
Advertisement