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

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