Search code examples
angularpaginationangular-materialangular7

reset paginator first page angular material


I am trying to go to the first page of the mat-paginator, that is, reset the pagination, but it does not work. Any idea how it can be solved?

My html is such that

<mat-paginator [length]="itemTotal" [pageIndex]="page" [pageSize]="itemPage" (page)="pageEvent = getPublicationFollowersData($event)">
    </mat-paginator>

The typescript:

   getPublicationFollowersData(event?: PageEvent) {
      this.getPublicationsUser(event.pageIndex);
}

and i try to initialize the page with:

this.page = 1

But it does not work.


Solution

  • You need to use a ViewChild decorator to select the paginator and then set the pageIndex property of the paginator.

    @ViewChild() paginator: MatPaginator;
    ...
    this.paginator.pageIndex = 0;
    

    Edit: As suggested by the other answers, if you would like to reset the paginator to the first page, it would be better to use this.paginator.firstPage()