How to change the text in the label in pagination?

Question

I use Angular Material. How to change the text in the label in the pagination ? For label for the page size selector.

I tried to do it but did not help:

<mat-paginator [pageSizeOptions]="[5, 10, 20]" [itemsPerPageLabel]="['The amount of data displayed']" showFirstLastButtons></mat-paginator>

Answer 1

Well this seems to be a problem with the mat-paginator from start, and it has been discussed here, so I would like you to suggest the same with work around create one file, note that in this file we are providing the lables. this class extends magpaginator and in main file we are showing that we are using the custom class for the pagination.

called CustomMatPaginatorIntl

like this

import {MatPaginatorIntl} from '@angular/material';
import {Injectable} from '@angular/core';

@Injectable()
export class CustomMatPaginatorIntl extends MatPaginatorIntl {
  constructor() {
    super();  

    this.getAndInitTranslations();
  }

  getAndInitTranslations() {

      this.itemsPerPageLabel = "test";
      this.nextPageLabel = "test";
      this.previousPageLabel = "test";
      this.changes.next();

  }

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

and import it to the providers in main.ts file

 providers: [{
      provide: MatPaginatorIntl, 
      useClass: CustomMatPaginatorIntl
    }]

Demo

You can keep needed things, removed one will be used from original class

Answer 2

You can also do this directly from the pagination instance. For example, if you want to add commas to the paginator label.

  @ViewChild(MatPaginator, { static: true })
  paginator: MatPaginator;

  decimalPipe = new DecimalPipe(navigator.language);

  ngOnInit() {
    this.paginator._intl.itemsPerPageLabel = 'Per page';
    this.paginator._intl.getRangeLabel = (page: number, pageSize: number, length: number) => {
      const start = page * pageSize + 1;
      const end = (page + 1) * pageSize;
      return `${start} - ${end} of ${this.decimalPipe.transform(length)}`;
    };
  }