Angular 9 Mat-Paginator - Translation

Question

How can I translate the Paginator in Angular 9?

When I add

paginatorRefresh() {
    setTimeout(() => this.dataSourceAma.paginator = this.paginator);
    this.dataSourceAma.sort = this.sort;
    this.paginator._intl.itemsPerPageLabel = 'Einträge pro Seite';
    this.paginator._intl.getRangeLabel = germanRangeLabel;
    // this.loading = false;
}

I get an error in the console:

** TypeError: Cannot read property '_intl' of undefined**

A [previous answer](https://stackoverflow.com/questions/47593692/how-to-translate-mat-paginator-in-angular-4) has updated information on how to do the translation — Mark S., Mar 27 '20 at 15:51
Does this answer your question? [How to translate mat-paginator in Angular 4?](https://stackoverflow.com/questions/47593692/how-to-translate-mat-paginator-in-angular-4) — Dharman, Mar 30 '20 at 11:56
We don't mark questions as solved by adding it to the title here. If you figured out the answer yourself, you can put that as an answer (self-answering is perfectly acceptable). If somebody else's answer solved it, you can mark that as accepted. If the answer was on another question, then you should accept the duplicate suggestion. — John Montgomery, Jun 01 '20 at 18:34

score 0 · Answer 1 · answered Jun 01 '20 at 18:28

Only two actions are required:

in your module, add:

providers:[
{ provide: MatPaginatorIntl, useValue: getPortuguesPaginatorIntl() }
]

Create a file paginator.translate.ts

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


const portuguesRangeLabel = (page: number, pageSize: number, length: number) => {
  if (length == 0 || pageSize == 0) { return `0 de ${length}`; }

  length = Math.max(length, 0);

  const startIndex = page * pageSize;

  // If the start index exceeds the list length, do not try and fix the end index to the end.
  const endIndex = startIndex < length ?
    Math.min(startIndex + pageSize, length) :
    startIndex + pageSize;

  return `${startIndex + 1} - ${endIndex} de ${length}`;
}

export function getPortuguesPaginatorIntl() {
  const paginatorIntl = new MatPaginatorIntl();
  paginatorIntl.itemsPerPageLabel = 'Items por página:';
  paginatorIntl.nextPageLabel = 'Próxima página';
  paginatorIntl.previousPageLabel = 'Página anterior';
  paginatorIntl.firstPageLabel = 'Primeira página';
  paginatorIntl.lastPageLabel = 'Ultima página';
  paginatorIntl.getRangeLabel = portuguesRangeLabel;
  return paginatorIntl;
}

Angular 9 Mat-Paginator - Translation

1 Answers1