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**

Answer 1

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