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

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 2

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 3

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

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

Answer 4

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

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''; 
}