How to customize mat-paginator in angular material

ananya picture ananya · Dec 6, 2018 · Viewed 24.3k times · Source

I want to customize mat-paginator .By default i am getting paginator like this which have given in below link https://material.angular.io/components/paginator/overview. But i want pagination like below image . How can i do this using mat-paginator

enter image description here

Can anyone please help me with this.

Answer

Marshal picture Marshal · Dec 6, 2018

UPDATE 08/20/2020


Using @uhamid answer as inspiration, along with several comments below, indicating this is in fact possible, I revised my first attempt to provide a complete solution.

Although Umair Hamid example below is functional, it did not include the styling required. It also leveraged ngDoCheck which introduces recursive type behavior and is likely to introduce performance issues.

I also refactored most of the logic to make for a more complete solution.

Use it like:

<mat-paginator style-paginator showFirstLastButtons [showTotalPages]="3" [length]="7130" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"> </mat-paginator>

Provide page buttons to display as input [showTotalPages], if not provided it will default to 2


enter image description here


STACKBLITZ

https://stackblitz.com/edit/angular-wyx2ue-bw95ug?embed=1&file=app/style-paginator.directive.ts

REVISED STACKBLITZ 8/20/2020

https://stackblitz.com/edit/angular-8holwx?file=src/app/style-paginator.directive.ts