angular - itemsperpagelabel - matpaginatorintl example

¿Cómo usar MatPaginatorIntl?

Question

Estoy usando el componente MatPaginator y estoy tratando de averiguar cómo traducir esas etiquetas (la documentación no es lo suficientemente clara).

Encontré este artículo que muestra cómo hacer esto y seguí los pasos:

1 - Creé un archivo llamado custom-paginator.ts y coloqué lo siguiente:

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

export class CustomPaginator extends MatPaginatorIntl {
  constructor() {
    super();
    this.nextPageLabel = '' My new label for next page'';
    this.previousPageLabel = '' My new label for previous page'';
    this.itemsPerPageLabel = ''Task per screen'';
  }
}

2 - En app.module.ts pongo:

@NgModule({
  // ...
  providers: [
    {
      provide: MatPaginatorIntl,
      useClass: CustomPaginator
    }
  ]
})
export class AppModule

Sin embargo, simplemente no cambia nada. ¿Qué me estoy perdiendo?

Answer 1

Además, puede utilizar los servicios inyectados marcando el Intl para que sea un inyectable en sí mismo. Vea el ejemplo (ignore los detalles específicos de DoneSubject y LocalizeService, ya que son implementaciones personalizadas):

    import { Injectable, OnDestroy } from ''@angular/core'';
    import { MatPaginatorIntl } from ''@angular/material'';
    import { LocalizeService } from ''app/general'';
    import { DoneSubject } from ''app/rx'';
    import { takeUntil } from ''rxjs/operators'';

    @Injectable()
    export class MatPaginatorIntlLoc extends MatPaginatorIntl implements OnDestroy {
      constructor(private readonly localizer: LocalizeService) {
        super();

        localizer.locale$.pipe(takeUntil(this.done$)).subscribe(() => {
          this.itemsPerPageLabel = localizer.translate(''mat paginator label: items per page'');
          this.nextPageLabel = localizer.translate(''mat paginator label: next page'');
          this.previousPageLabel = localizer.translate(''mat paginator label: previous page'');
          this.firstPageLabel = localizer.translate(''mat paginator label: first page'');
          this.lastPageLabel = localizer.translate(''mat paginator label: last page'');
        });
      }

      private readonly done$ = new DoneSubject();

      ngOnDestroy() { this.done$.done(); }

      getRangeLabel = (page: number, pageSize: number, length: number) => this.localizer
        .translate(''mat paginator label: x of y'', [
          length > 0 && pageSize > 0 ? (page * pageSize + 1) + '' - '' + Math.min((page + 1) * pageSize, Math.max(length, 0)) : 0,
          Math.max(length, 0),
        ]);
    }

Y no olvides incluirlo en tu módulo:

    providers: [
        ...
        { provide: MatPaginatorIntl, useClass: MatPaginatorIntlLoc },
        ...
      ]

Answer 2

Basado en el código Vinko Vorih, hice un paginador trabajando con ngx-translate, aquí está el código:

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

export class PaginatorIntlService extends MatPaginatorIntl {
  translate: TranslateService;
  itemsPerPageLabel = ''Items per page'';
  nextPageLabel     = ''Next page'';
  previousPageLabel = ''Previous page'';
  getRangeLabel = function (page, pageSize, length) {
    const of = this.translate ? this.translate.instant(''paginator.of'') : ''of'';
    if (length === 0 || pageSize === 0) {
      return ''0 '' + of + '' '' + 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 startIndex + 1 + '' - '' + endIndex + '' '' + of + '' '' + length;
  };

  injectTranslateService(translate: TranslateService) {
    this.translate = translate;

    this.translate.onLangChange.subscribe(() => {
      this.translateLabels();
    });

    this.translateLabels();
  }

  translateLabels() {
    this.itemsPerPageLabel = this.translate.instant(''paginator.items_per_page'');
    this.nextPageLabel = this.translate.instant(''paginator.next_page'');
    this.previousPageLabel = this.translate.instant(''paginator.previous_page'');
  }

}

Y luego en su entrada de proveedores de módulos:

{
  provide: MatPaginatorIntl,
  useFactory: (translate) => {
    const service = new PaginatorIntlService();
    service.injectTranslateService(translate);
    return service;
  },
  deps: [TranslateService]
}

De esta manera, puede almacenar las traducciones en su archivo i18n habitual y, si su aplicación web puede cambiar la configuración regional de manera dinámica, el paginador se traducirá a pedido.

Answer 3

Hice algunas modificaciones para corregir el índice final cuando el índice de inicio excede la longitud de la lista. También agrego la traducción para la primera y última página. Es para componente de paginación @ angular / material 5.2.4.

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

@Injectable()
export class MatPaginationIntlService extends MatPaginatorIntl {
  translate: TranslateService;
  firstPageLabel = ''First page'';
  itemsPerPageLabel = ''Items per page'';
  lastPageLabel = ''Last page'';
  nextPageLabel = ''Next page'';
  previousPageLabel = ''Previous page'';

  getRangeLabel = (page: number, pageSize: number, length: number): string => {
    const of = this.translate ? this.translate.instant(''mat-paginator-intl.of'') : ''of'';
    if (length === 0 || pageSize === 0) {
      return ''0 '' + of + '' '' + length;
    }
    length = Math.max(length, 0);
    const startIndex = ((page * pageSize) > length) ?
      (Math.ceil(length / pageSize) - 1) * pageSize:
      page * pageSize;

    const endIndex = Math.min(startIndex + pageSize, length);
    return startIndex + 1 + '' - '' + endIndex + '' '' + of + '' '' + length;
  };

  injectTranslateService(translate: TranslateService) {
    this.translate = translate;

    this.translate.onLangChange.subscribe(() => {
      this.translateLabels();
    });

    this.translateLabels();
  }

  translateLabels() {
    this.firstPageLabel = this.translate.instant(''mat-paginator-intl.first_page'');
    this.itemsPerPageLabel = this.translate.instant(''mat-paginator-intl.items_per_page'');
    this.lastPageLabel = this.translate.instant(''mat-paginator-intl.last_page'');
    this.nextPageLabel = this.translate.instant(''mat-paginator-intl.next_page'');
    this.previousPageLabel = this.translate.instant(''mat-paginator-intl.previous_page'');
  }
}

Answer 4

Inyecte MatPaginatorIntl en cualquier lugar de su aplicación, configure las traducciones deseadas y llame a changes.next (). Repita en cada cambio de idioma (por ejemplo, suscribiéndose a onLangChange cuando se utiliza ngx-translate).

Answer 5

Para actualizar la etiqueta, puede activar un evento de cambio después de cambiar la etiqueta:

translateLabels() {
    this.firstPageLabel = this.translate.instant(''mat-paginator-intl.first_page'');
    ...
    this.changes.next();
}

Answer 6

Puedes hacerlo de esta manera: te estoy proporcionando etiquetas croatas:

customClass.ts

import {MatPaginatorIntl} from ''@angular/material'';
export class MatPaginatorIntlCro extends MatPaginatorIntl {
  itemsPerPageLabel = ''Stavki po stranici'';
  nextPageLabel     = ''Slijedeća stranica'';
  previousPageLabel = ''Prethodna stranica'';

  getRangeLabel = function (page, pageSize, length) {
    if (length === 0 || pageSize === 0) {
      return ''0 od '' + 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 startIndex + 1 + '' - '' + endIndex + '' od '' + length;
  };

}

y AppModule.ts:

providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],

Funciona muy bien

Además, debe importar en su appModule.ts tanto MatPaginatorIntl como MatPaginatorIntlCro

Answer 7

Tuve el mismo problema y luego cambié en app.module.ts en la declaración de importaciones TranslateModule a TranslateModule.forRoot ()

Así que se ve así:

imports: [
    ...
    TranslateModule.forRoot()
    ...
]

Cita del sitio de NPM: "El método forRoot static es una convención que proporciona y configura servicios al mismo tiempo. Asegúrese de que solo llame a este método en el módulo raíz de su aplicación, la mayoría de las veces, se llama AppModule. Este método le permite configure el TranslateModule especificando un cargador, un analizador y / o un controlador de traducción faltante ".

Aquí está el artículo completo: https://www.npmjs.com/package/@ngx-translate/core

Leer esto puede ayudar a resolver muchos problemas con TranslateModule!

Answer 8

en el archivo: matPaginatorIntlCroClass.ts

import {MatPaginatorIntl} from ''@angular/material'';
export class MatPaginatorIntlCro extends MatPaginatorIntl {
  itemsPerPageLabel = ''Items par page'';
  nextPageLabel     = ''Page Prochaine'';
  previousPageLabel = ''Page Précedente'';
}

en Archivo: AppModule.ts:

import { MatPaginatorModule, MatPaginatorIntl} from ''@angular/material'';
import { MatPaginatorIntlCro } from ''./matPaginatorIntlCroClass''

@NgModule({
  imports: [],
  providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],
  ..
})

Fuente: MatPaginator