Translating the MatPaginator Angular Material component
The MatPaginator component of Angular Material can be translated, but it requires a specific approach
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
- previousPageLabel
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.
The 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:
"I18N": {
"MAT_PAGINATOR": {
"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",
"OF": "sur"
}
}
Finally, we need to add a provider to some shared module:
Conclusion
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! ✨
Go Further
Sébastien Dubois
Sébastien Dubois
Sébastien Dubois
Want to go deeper?
Sébastien Dubois
About Sébastien
I'm Sébastien Dubois, and I'm on a mission to help knowledge workers escape information overload. After 20+ years in IT and seeing too many brilliant minds drowning in digital chaos, I've decided to help people build systems that actually work. Through the Knowii Community, my courses, products & services and my Website/Newsletter, I share practical and battle-tested systems.
I write about Knowledge Work, Personal Knowledge Management, Note-taking, Lifelong Learning, Personal Organization, Productivity, and more. I also craft lovely digital products and tools.
If you want to follow my work, then become a member and join our community.
Ready to get to the next level?
Want to level up as a developer?
- 📖 Dev Concepts — 12 volumes covering IT & software development from scratch
- 💼 Knowledge Worker Kit — Productivity guides for knowledge workers
- 🚀 Obsidian Starter Kit — Organize your dev knowledge
- 🎯 Join Knowii — Community + ALL courses & tools
Found this valuable? Share it with someone who needs it.