Customize angular mat. paginator inputs

Programming
, ,
1

I am using Angular Material Paginator with the following HTML code:

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

This makes my paginator look like this:

enter image description here

I need to customize the paginator to add an input to indicate the number of pages to be shown. Is there a solution for this?

2

Yes, you can add a custom input element to your paginator by using a template reference variable and binding to the pageIndex input of the paginator.

Here’s an example of how you can add an input element to your paginator:

<mat-paginator #paginator [pageSize]="6" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true">
  <mat-paginator-page-size-label>
    <span>Show</span>
    <input matInput [(ngModel)]="pageSize" [value]="6" (blur)="paginator.pageIndex = 0">
    <span>items per page</span>
  </mat-paginator-page-size-label>
</mat-paginator>

In this example, we’re using the mat-paginator-page-size-label directive to add a custom input element to the paginator. We’re also binding the input’s ngModel to a variable called pageSize, which we’ll use to update the page size when the user changes it.

Finally, we’re also setting the pageIndex of the paginator to 0 whenever the input loses focus, so that we always start on the first page when the page size changes.

Hope that helps!