angularangular-materialangular-material-tableangular-pagination

(ANGULAR-12) Mat-paginator change page after condition


I'm looking for a way to change the page of the mat-paginator inside of my HTML.

When I edit a user, I want to stay on the same page as the mat-paginator. So I store this information inside the currentPage variable.

But I want to say to Angular, if this variable !null, go to this page of mat-paginator

<!-- Pagination -->
<mat-paginator  *ngIf="!currentPage" color="primary" [hidden]="dataSource.totalItems === 0" [length]="dataSource.totalItems"
    [pageSize]="dataSource.pageSize" [pageIndex]="dataSource.pageIndex - 1" [pageSizeOptions]="pageSizeOptions"
    (page)="onPaginateChange($event)" showFirstLastButtons>
</mat-paginator>

I tried to write two but I can't re-render pagination without an event.


Solution

  • this.paginator.pageIndex = this.goTo - 1;
       const event: PageEvent = {
       length: this.paginator.length,
       pageIndex: this.paginator.pageIndex,
       pageSize: this.paginator.pageSize
    };
    this.paginator.page.next(event); 
    

    here goTo is variable which indicate on which page you want to go so after saving the information of user you need to put above code to navigate to page.