We currently have a simple mat-paginator that looks like this:

For the texts we use a custom MatPaginatorIntl for which we overwrite the nextPageLabel, previousPageLabel, and getRangeLabel (with ofLabel) to use our own translatable labels based on the chosen language of the user.
So far so good.

Some of the collection panels can be very large, so we want to have the total length lazy-evaluated. What I mean by this: in the screenshot above, the 496 is calculated with a count to the database and given to the front-end initially when the page is loaded. We would like to replace this count with an anchor-link "meer" (Dutch for "more") instead, and only when the user clicks on it, we do a separated call to the back-end and database to get the total count to replace that link. From a user’s perspective, 9 out of 10 times you only want to know that there are more pages, but don’t really care about how many more.

Unfortunately, the MatPaginatorIntl and mat-paginator both seem to be very basic. Too basic to make a change like this.
Our current idea is to replace the entire mat-paginator with our own component, which looks and acts exactly the same, but is customizable to our needs. But before I do that, I figured I’d make a question here in case anyone else has a better alternative by using the existing mat-paginator.

Not too relevant, but here is our current custom matPaginatorIntl:

import { MatPaginatorIntl } from '@angular/material/paginator';
import { TranslatePipe } from '../translate.pipe';

export class MatPaginatorIntlCustom extends MatPaginatorIntl {
  nextPageLabel="Next page";
  previousPageLabel="Previous page";
  ofLabel="of";
  getRangeLabel = this.createRangeLabel();

  private createRangeLabel(): (page: number, pageSize: number, length: number) => string {
    return (page, pageSize, length) => {
      if (length === 0 || pageSize === 0) {
        return `0 ${this.ofLabel} ${length}`;
      }
      if (pageSize === length) {
        page = 0;
      }
      length = Math.max(length, 0);
      const startIndex = page * pageSize;
      const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
      return `${startIndex + 1} - ${endIndex} ${this.ofLabel} ${length}`;
    };
  }

  inject(translate: TranslatePipe): MatPaginatorIntlCustom {
    this.nextPageLabel = translate.transform('nextpage');
    this.previousPageLabel = translate.transform('prevpage');
    this.ofLabel = translate.transform('ofpage');
    return this;
  }
}

As well as a snippet of how it’s used within our PaginatorComponent:

@Component({
  selector: 's-paginator',
  templateUrl: './paginator.component.html',
  styleUrls: ['./paginator.component.scss'],
  providers: [
    TranslatePipe, {
      provide: MatPaginatorIntl,
      useFactory: (translate: TranslatePipe) => new MatPaginatorIntlCustom().inject(translate),
      deps: [TranslatePipe]
    }],
})
export class PaginatorComponent extends Base {
  @ViewChild(MatPaginator) paginator?: MatPaginator;
  ...
}