Translating the MatPaginator Angular Material component

Sébastien Dubois
3 min readJul 26, 2020

The MatPaginator component of Angular Material can be translated, but it requires a specific approach.

Picture courtesy of Nereeta Martin

Internationalization and localization start to matter as soon as your application is not limited to a single community of users, all speaking the same language. Fortunately for us, Angular Material has great support for internationalization & localization.

The MatPaginator component is often used in combination with lists / tables, in order to let end users control the number of items per page and allow them to easily navigate from page to page. Of course there are a few labels to translate (e.g., first page, items per page, last page, etc).

In this article, I’ll explain how to translate the MatPaginator component, which is a bit more complicated to handle; it’s one of those “you have to know that to know that” cases.

MatPaginatorIntl

To translate the MatPaginatorComponent, you need to use/extend the MatPaginatorIntl class

The built-in class exposes static properties providing the different labels:

  • firstPageLabel
  • getRangeLabel
  • itemsPerPageLabel
  • lastPageLabel
  • nextPageLabel

--

--