The MatPaginator component of Angular Material can be translated, but it requires a specific approach.
Internalization 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.
To translate the MatPaginatorComponent, you need to use/extend the MatPaginatorIntl class
The built-in class exposes static properties providing the different labels:
The default implementation does not translate those labels. It simply returns the english version statically. So we have to extend it in order to be able to translate the labels ourselves dynamically.
Let’s see how.
Creating a custom implementation of the MatPaginatorIntl class
Our custom MatPaginatorIntl implementation will extend the built-in class in order to dynamically replace the translations with the correct ones, depending on the active language. In order to do that, we’ll need to listen to language changes in the class and adapt the translations at that point, since those need to be stored in the class.
For this example, we’ll use ngx-translate, but you can easily adapt the code to use another internationalization library of your choice.
As you can see, our implementation simply extends the built-in class. So, by default, it inherits from the default english version of the labels.
We inject the
TranslateService of ngx-translate and use it to subscribe to language change events. Whenever the language changes, we call the
translateLabels method of our class to translate the different labels and update the superclass properties. The
translateLabels method finishes by emitting an event using
this.changes.next(), which warns Angular Material that the labels have changed and may need to be refreshed on screen.
In the constructor, we also immediately invoke the
translateLabels method in order to directly get the correct translation, depending on the currently active language.
getRangeLabel method requires a bit more fiddling around because the translation is in the middle of a sentence. The default implementation is simply using concatenation. Here we mostly do the same, except that we translate the “of” word. You can get fancy and use more advanced solutions here. In my case, this fit the bill.
With the above implementation, we simply need to add the following translation keys:
"FIRST_PAGE": "Première page",
"ITEMS_PER_PAGE": "Eléments par page",
"LAST_PAGE": "Dernière page",
"NEXT_PAGE": "Page suivante",
"PREVIOUS_PAGE": "Page précédente",
Finally, we need to add a provider to some shared module:
In this short article, I’ve explained how you can translate the MatPaginator component of Angular Material. It’s not hard at all, but you just can’t guess it ;-)
That’s it for today!
Enjoyed this article?
If you want to learn tons of other cool things about software/Web development, TypeScript, Angular, React, Vue, Kotlin, Java, Docker/Kubernetes and other cool subjects, then don’t hesitate to grab a copy of my book and to subscribe to my newsletter!