¿Cómo traducir mat-paginator en Angular 4?

Queremos compartir contigo la mejor información que descubrimos en línea. Nosotros queremos que te resulte de mucha ayuda y si puedes aportar algún detalle que nos pueda ayudar a mejorar hazlo con libertad.

Solución:

Puedes usar el MatPaginatorIntl para esto. Will Showell hizo un ejemplo que ya no funciona, así que aquí hay una versión actualizada (en holandés) y una guía paso a paso.

1. Importar el MatPaginatorIntl desde @angular/material en su aplicación.
2. Cree un nuevo archivo de paginador para su configuración regional (en este ejemplo, uso holandés) e impórtelo: import getDutchPaginatorIntl from './app/dutch-paginator-intl'; en main.ts expediente
3. Establecer un provider para el paginador dentro del main.ts archivo, por lo que toma las traducciones de su archivo local (en lugar del inglés como idioma predeterminado):

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

4. dentro de tu paginador-intl archivo, configure las etiquetas para las cadenas que se pueden traducir y expórtelas. La parte más importante de ese archivo (consulte el ejemplo para obtener más información):

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

Ejemplo en StackBlitz con el archivo de traducciones del paginador como punto de partida.

---

Junio ​​2018 – Actualización a Angular 6.x

esta actualizado Ejemplo en StackBlitz se actualiza a Angular 6.x para adaptarse a la última versión del marco. Solo han cambiado los paquetes, nada dentro del paginador ha cambiado.

---

Junio ​​2019 – Actualización a Angular 8.x

esta actualizado Ejemplo en StackBlitz se actualiza a Angular 8.x para adaptarse a la última versión del marco. Solo han cambiado los paquetes, nada dentro del paginador ha cambiado.

---

Febrero de 2020 – Actualización a Angular 9.x

esta actualizado Ejemplo en StackBlitz se actualiza a Angular 9.x para adaptarse a la última versión del marco. Las versiones del paquete han cambiado. El cambio principal es la forma de importar desde Angular Material. Ya no puede importar desde la raíz del material. Debe especificar la importación desde el módulo (material/paginator) sí mismo:

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

---

Junio ​​2020 – Actualización a Angular 10.x

esta actualizado Ejemplo en StackBlitz se actualiza a Angular 10.x para adaptarse a la última versión del marco. Solo han cambiado los paquetes, nada dentro del paginador ha cambiado.

---

Diciembre 2020 – Actualización a Angular 11.x

esta actualizado Ejemplo en StackBlitz se actualiza a Angular 11.x para adaptarse a la última versión del marco. Solo han cambiado los paquetes, nada dentro del paginador ha cambiado.

Solución modificada (con Angular 6) basada en la respuesta aceptada con @ ngx-translate:

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

Y el 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 

y cz.json

    "ITEMS_PER_PAGE_LABEL": "Počet řádků:",
    "NEXT_PAGE_LABEL": "Další stránka",
    "PREVIOUS_PAGE_LABEL": "Předchozí 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"
  

Configurar ngx-traducir 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  

Para una solución rápida y sucia, use la propiedad this.paginator._intl.

En mi ...component.ts Tengo:

@ViewChild(MatPaginator) paginator: MatPaginator;

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

Calificaciones y comentarios

Nos puedes ayudar nuestra tarea añadiendo un comentario y puntuándolo te estamos agradecidos.

---

---

Utiliza Nuestro Buscador