Translating the MatPaginator Angular Material component
The MatPaginator component of Angular Material can be translated, but it requires a specific approach.
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
