Traduire mat-paginator en Angular
Traduire mat-paginator en Angular
-
Objectifs
- être capable de traduire la composant Angular paginator
-
Présentation
- Angular Material fournit de nombreux composants pour créer des applications riches à l’aide de Material Design. L’un d’eux est un MatPaginator pour contrôler les pages de liste ou de table. En outre, il contient des étiquettes pour informer un utilisateur de la page en cours ou de la plage d’éléments affichés.
- Le problème se produit lorsqu’un développeur essaie de traduire les informations susmentionnées en utilisant la bibliothèque la plus populaire pour traduire pour Angular est
Angular- @ ngx-translate
. - Mais le package est basé sur une traduction asynchrone avec changement juste à temps de la langue sélectionnée à l’aide de RxJS Observables.
- Dans l’article, je vous présente comment traduire le composant
MatPaginatorIntl
sous la forme d’un ensemble de chaînes -
Réalisation
- Dans ce tutoriel je vais vous proposer une solution simple qui consiste à créer un fichier et de l’appeler dans le fichier module
- Créez un fichier appelé
/app/paginationPersonnalise.ts
- Importer vers
app.modudle.ts
- Ajouter la ligne suivante au provider:
{ provide: MatPaginatorIntl, useClass: paginationPersonnalise}