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

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)}`;
    };
  }

Answer 3

MatPaginator allows you to change paginator labels using the MatPaginatorIntl class.

You can translate:

• itemsPerPageLabel
• nextPageLabel
• previousPageLabel
• firstPageLabel
• lastPageLabel
• getRangeLabel

I created a localizationService with a translateMatPaginator method:

    translateMatPaginator(paginator: MatPaginator) {
      paginator._intl.firstPageLabel = '<custom label here>';
      paginator._intl.itemsPerPageLabel = '<custom label here>';
      paginator._intl.lastPageLabel = '<custom label here>';
      paginator._intl.nextPageLabel = '<custom label here>';
      paginator._intl.previousPageLabel = '<custom label here>';
    }

You only need to inject it in your component and call:

    this.localizationService.translateMatPaginator(paginator);

Answer 4

Use childView to access paginator in your .ts file as follows:

@ViewChild(MatPaginator) paginator: MatPaginator;
  
ngOninit() {
    this.paginator._intl.itemsPerPageLabel = 'your custom text';
}

Answer 5

this helped me to change 'itemsPerPageLabel'

In your component:

import { MatPaginatorIntl } from '@angular/material/paginator';

constructor(private paginator: MatPaginatorIntl) {
    paginator.itemsPerPageLabel = 'The amount of data displayed''; 
}

Answer 6

Write a custom version of getRangeLabel

This is a simple, flexible, and powerful approach and allows you to customize the full paginator text instead of just one part of it.

In your component, set up your paginator:

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

Then assign a custom function in the afterViewInit:

  ngAfterViewInit() {
    this.paginator._intl.getRangeLabel = this.getRangeDisplayText;
  }

Then set up a custom function to display the text you need:

getRangeDisplayText = (page: number, pageSize: number, length: number) => {
  const initialText = `Displaying users`;  // customize this line
  if (length == 0 || pageSize == 0) {
    return `${initialText} 0 of ${length}`;
  }
  length = Math.max(length, 0);
  const startIndex = page * pageSize;
  const endIndex = startIndex < length 
    ? Math.min(startIndex + pageSize, length) 
    : startIndex + pageSize;
  return `${initialText} ${startIndex + 1} to ${endIndex} of ${length}`; // customize this line
};

This will use whatever pageSize and length you have in your HTML or have configured in your component.

  <mat-paginator [length]="dataSource.total"
      [pageSize]="10"
      hidePageSize
      showFirstLastButtons>

If your data returns 50 recordes, this will show this text:

Displaying users 1 to 10 of 50