Customize angular material paginator inputs

Question

I'am using Angular Material Paginator, This is the html code that I have for my mat paginator

<mat-paginator #paginator [pageSize]="6" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true">
  </mat-paginator>

My paginator looks like this

The problem is that I have a huge data list to display so many pages for the paginator, I'am looking for a way to customize the paginator and adding an input to indicate the number of page that I want to show, is there any solution to code it ?

Answer 1

There is nothing built into the paginator to do that. But you can add a custom input and set the page number through code.

@ViewChild(MatPaginator) paginator: MatPaginator;
goToPage(pageNumber: number) {
  // this updates the paginator component
  this.paginator.pageIndex = pageNumber - 1;

  // emit an event so that the table will refresh the data
  this.paginator.page.next({
    pageIndex: this.paginator.pageIndex,
    pageSize: this.paginator.pageSize,
    length: this.paginator.length
  });
}

https://stackblitz.com/edit/mat-paginator-select-page?embed=1

Answer 2

You can use the pageIndex directive in your html code and bind it to your current page minus one or set any value as you wish:

<mat-paginator
  *ngIf="!loading"
  [length]="allServerPostsLength"

//set any value as you wish...
  [pageIndex]="currPage - 1"
  [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions"
  (page)="onChangedPage($event)"
  #paginator
></mat-paginator>

here you can find more options: https://material.angular.io/components/paginator/api#MatPaginatorDefaultOptions:~:text=Defaulted%20to%200.-,%40Input(),pageIndex%3A%20number,-The%20zero%2Dbased