CODEWITHSUNDEEP
angularangular-materialmat-pagination
user10720571
user10720571

Reputation: 373

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

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>

Upvotes: 11

Views: 38904

Answers (6)

Samara Mu&#241;oz
Samara Mu&#241;oz

Reputation: 21

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

Upvotes: 2

Tony Brasunas
Tony Brasunas

Reputation: 4592

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

Upvotes: 1

Ramin Ar
Ramin Ar

Reputation: 1331

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

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

Upvotes: 8

Andr3a
Andr3a

Reputation: 69

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

Upvotes: 6

Chris Fremgen
Chris Fremgen

Reputation: 5418

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

Upvotes: 14

Just code
Just code

Reputation: 13801

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

Upvotes: 22

Related Questions