How to change the text in the label in pagination with MatPaginator?

Question

I'm using Angular Material. How can I change the text in the label in the pagination display? In particular, I want to customize the label for the page size selector.

I tried to do this, but it did not seem to work:

<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