Comment traduire mat-paginator en Angular 4 ?

Question

Avez-vous une idée de la façon dont je peux traduire "Items per page" dans le langage Angular ? mat-paginator tag ? Le site mat-paginator est un élément du Material Design.

Answer 1

Vous pouvez utiliser le MatPaginatorIntl pour ça. Will Showell a fait un exemple qui ne fonctionne plus, voici donc une version actualisée (avec le néerlandais) et des conseils étape par étape.

1. Importez le MatPaginatorIntl de @angular/material dans votre application.

2. Créez un nouveau fichier paginator pour votre langue (dans cet exemple, j'utilise le néerlandais) et importez-le : import { getDutchPaginatorIntl } from './app/dutch-paginator-intl'; en main.ts archivo

3. Définir un provider pour le Paginator à l'intérieur du main.ts afin qu'il prenne les traductions de votre fichier local (au lieu de l'anglais comme langue par défaut) :

   providers: [ { provide: MatPaginatorIntl, useValue: getDutchPaginatorIntl() } ]

4. Dans votre paginateur-intl définir les étiquettes pour les chaînes de caractères qui peuvent être traduites et les exporter. La partie la plus importante de ce fichier (voir l'exemple pour plus d'informations) :

   paginatorIntl.itemsPerPageLabel = 'Items per pagina:'; paginatorIntl.firstPageLabel = 'Eerste pagina'; paginatorIntl.previousPageLabel = 'Vorige pagina'; paginatorIntl.nextPageLabel = 'Volgende pagina'; paginatorIntl.lastPageLabel = 'Laatste pagina'; paginatorIntl.getRangeLabel = dutchRangeLabel;

Exemple sur StackBlitz avec le fichier de traduction du paginateur comme point de départ.

---

Juin 2018 - Mise à jour vers Angular 6.x
Cette mise à jour Exemple sur StackBlitz est mis à jour vers Angular 6.x pour s'adapter à la dernière version du framework. Seuls les paquets ont changé, rien à l'intérieur du paginateur n'a été modifié.

---

Juin 2019 - Mise à jour vers Angular 8.x
Cette mise à jour Exemple sur StackBlitz est mis à jour vers Angular 8.x pour s'adapter à la dernière version du framework. Seuls les paquets ont changé, rien à l'intérieur du paginateur n'a été modifié.

---

Février 2020 - Mise à jour vers Angular 9.x
Cette mise à jour Exemple sur StackBlitz est mis à niveau vers Angular 9.x pour s'adapter à la dernière version du framework. Les versions des paquets ont changé. Le changement majeur est la façon d'importer depuis Angular Material. Vous ne pouvez plus importer à partir de la racine de Material. Vous devez spécifier l'importation à partir du module ( material/paginator ) lui-même :

import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material/paginator';

---

Juin 2020 - Mise à jour vers Angular 10.x
Cette mise à jour Exemple sur StackBlitz est mis à niveau vers Angular 10.x pour s'adapter à la dernière version du framework. Seuls les paquets ont changé, rien à l'intérieur du paginateur n'a été modifié.

---

Décembre 2020 - Mise à jour vers Angular 11.x
Cette mise à jour Exemple sur StackBlitz est mis à jour vers Angular 11.x pour s'adapter à la dernière version du framework. Seuls les paquets ont changé, rien à l'intérieur du paginateur n'a été modifié.

---

Mai 2021 - Mise à jour vers Angular 12.x
Cette mise à jour Exemple sur StackBlitz est mis à niveau vers Angular 12.x pour s'adapter à la dernière version du framework. Seuls les paquets ont changé, rien à l'intérieur du paginateur n'a été modifié.

Answer 2

Solution modifiée (avec Angular 6) basée sur la réponse acceptée avec @ngx-translate :

@NgModule({
  imports: [...],
  providers: [
    {
      provide: MatPaginatorIntl, deps: [TranslateService],
      useFactory: (translateService: TranslateService) => new PaginatorI18n(translateService).getPaginatorIntl()
    }
  ]
})
export class CoreModule {}

Et le PaginatorI18n :

import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';

export class PaginatorI18n {

    constructor(private readonly translate: TranslateService) {}

    getPaginatorIntl(): MatPaginatorIntl {
        const paginatorIntl = new MatPaginatorIntl();
        paginatorIntl.itemsPerPageLabel = this.translate.instant('ITEMS_PER_PAGE_LABEL');
        paginatorIntl.nextPageLabel = this.translate.instant('NEXT_PAGE_LABEL');
        paginatorIntl.previousPageLabel = this.translate.instant('PREVIOUS_PAGE_LABEL');
        paginatorIntl.firstPageLabel = this.translate.instant('FIRST_PAGE_LABEL');
        paginatorIntl.lastPageLabel = this.translate.instant('LAST_PAGE_LABEL');
        paginatorIntl.getRangeLabel = this.getRangeLabel.bind(this);
        return paginatorIntl;
    }

    private getRangeLabel(page: number, pageSize: number, length: number): string {
        if (length === 0 || pageSize === 0) {
            return this.translate.instant('RANGE_PAGE_LABEL_1', { length });
        }
        length = Math.max(length, 0);
        const startIndex = page * pageSize;
        // If the start index exceeds the list length, do not try and fix the end index to the end.
        const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
        return this.translate.instant('RANGE_PAGE_LABEL_2', { startIndex: startIndex + 1, endIndex, length });
    }
}

et cz.json

{
    "ITEMS_PER_PAGE_LABEL": "Pocet rádku:",
    "NEXT_PAGE_LABEL": "Další stránka",
    "PREVIOUS_PAGE_LABEL": "Predchozí stránka",
    "FIRST_PAGE_LABEL": "První stránka",
    "LAST_PAGE_LABEL": "Poslední stránka",
    "RANGE_PAGE_LABEL_1": "0 z {{length}}",
    "RANGE_PAGE_LABEL_2": "{{startIndex}} - {{endIndex}} z {{length}}"
}  

Configurer ngx-translate en app.module.ts :

import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
const httpLoaderFactory = (http: HttpClient) => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: { provide: TranslateLoader, useFactory: httpLoaderFactory, deps: [HttpClient] }
    })
  ],
  providers: [{ provide: LOCALE_ID, useValue: 'cs' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

Pour une solution rapide et sale, utilisez la propriété this.paginator._intl.

Dans mon ...component.ts Je l'ai fait :

@ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit() {
  ...
  this.paginator._intl.itemsPerPageLabel = 'My translation for items per page.';
  ...
}

Answer 4

Vous pouvez pirater votre chemin dans MatPaginator._intl et placez-y votre chaîne en utilisant ngx-translate .

forkJoin({
  itemsPerPageLabel: this.translate.get('paginator.itemsPerPageLabel'),
  nextPageLabel: this.translate.get('paginator.nextPageLabel'),
  previousPageLabel: this.translate.get('paginator.previousPageLabel'),
  firstPageLabel: this.translate.get('paginator.firstPageLabel'),
  lastPageLabel: this.translate.get('paginator.lastPageLabel'),
}).subscribe(values => {
  this.paginator._intl.itemsPerPageLabel = values.itemsPerPageLabel;
  this.paginator._intl.nextPageLabel = values.nextPageLabel;
  this.paginator._intl.previousPageLabel = values.previousPageLabel;
  this.paginator._intl.firstPageLabel = values.firstPageLabel;
  this.paginator._intl.lastPageLabel = values.lastPageLabel;

  // 1 – 10 of 100
  // https://github.com/angular/components/blob/master/src/material/paginator/paginator-intl.ts#L41
  this.paginator._intl.getRangeLabel = (page: number, pageSize: number, length: number): string => {
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
    return this.translate.instant('paginator.getRangeLabel', {
      startIndex: startIndex + 1,
      endIndex,
      length,
    });
  };

  // Otherwise, the paginator won't be shown as translated.
  this.dataSource.paginator = this.paginator;
});

Answer 5

this.dataSource.paginator._intl.itemsPerPageLabel = "Your string here";

cela a fonctionné dans la dernière version d'angular8 + material8 ;