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>

Answer 1

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

1. 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);
   }
   

2. 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);
      });
   }
   

3. Include this method in your css file(note: do not include in the main styles.css file)

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

4. 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

Answer 2

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