Pagination on Angular Material Design - Show page numbers or remove the row count

Question

Angular 6/7, Material Design.

Since I don't have access to the total number of items the item count is irrelevant (the box in the screen shot).

How do I remove the item count completely? Or alternatively show the page I'm currently on instead of the item count?

<mat-paginator
    itemsPerPageLabel="Items per page"
    (page)="changePage()"
    [length]="resultsLength"
    [pageSizeOptions]="[10, 100]">
</mat-paginator>

[This answer has a lot of useful examples how to customize paginator](https://stackoverflow.com/a/47594193/11275812) — orlyohreally, Oct 03 '19 at 13:36

score 15 · Accepted Answer · answered Jan 16 '19 at 09:41

Remove the range label by inserting in global CSS

.mat-paginator-range-label {
    display: none;
}

Insert page number instead (of course based on your API - you might not have the page info!) by inserting in your component

ngAfterViewChecked() {
        const list = document.getElementsByClassName('mat-paginator-range-label');
        list[0].innerHTML = 'Page: ' + this.page.toString();
}

and of course delete the CSS rule above!

Paginator now looks like this

Dushyanth Kandiah · Answer 2 · 2020-08-06T16:31:58.483

I just modified Johan Faerch's solution to fit more to your question.

Create method which has two parameters, one for matpaginator and another for list of HTMLCollectionOf

paginatorList: HTMLCollectionOf<Element>;

onPaginateChange(paginator: MatPaginator, list: HTMLCollectionOf<Element>) {
     setTimeout((idx) => {
         let from = (paginator.pageSize * paginator.pageIndex) + 1;

         let to = (paginator.length < paginator.pageSize * (paginator.pageIndex + 1))
             ? paginator.length
             : paginator.pageSize * (paginator.pageIndex + 1);

         let toFrom = (paginator.length == 0) ? 0 : `${from} - ${to}`;
         let pageNumber = (paginator.length == 0) ? `0 of 0` : `${paginator.pageIndex + 1} of ${paginator.getNumberOfPages()}`;
         let rows = `Page ${pageNumber} (${toFrom} of ${paginator.length})`;

         if (list.length >= 1)
             list[0].innerHTML = rows; 

     }, 0, paginator.pageIndex);
}

How to call this method? you can initialize this on ngAfterViewInit()

ngAfterViewInit(): void {
   this.paginatorList = document.getElementsByClassName('mat-paginator-range-label');

   this.onPaginateChange(this.paginator, this.paginatorList);

   this.paginator.page.subscribe(() => { // this is page change event
     onPaginateChange(this.paginator, this.paginatorList);
   });
}

Include this method in your css file(note: do not include in the main styles.css file)
```
.mat-paginator-range-label {
    display: none;
}
```
You can call onPaginateChange(this.paginator, this.paginatorList) functions wherever you need to change the page number details other than clicking on the navigation buttons on the mat paginator.

Result looks like this

Thx but that's pretty much the opposite of what I was trying to accomplish. You have just expanded the page information (which is already there in the default solution). I needed to remove the information since I did NOT have access to neither the total number of pages nor the total number of items. — Johan Faerch, Sep 05 '20 at 20:46

Pagination on Angular Material Design - Show page numbers or remove the row count

2 Answers2