Comment changer le texte de l'étiquette en pagination?

Eh bien, cela semble être un problème avec le mat-paginator depuis le début, et cela a été discuté ici , je voudrais donc que vous suggériez la même chose avec le travail autour de créer un fichier, notez que dans ce fichier, nous fournissons les étiquettes. cette classe étend magpaginator et dans le fichier principal, nous montrons que nous utilisons la classe personnalisée pour la pagination.

appelé CustomMatPaginatorIntl

comme ceci

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

et l'importer dans les fournisseurs dans le fichier main.ts

import {MatPaginatorIntl} from '@angular/material';
import {Injectable} from '@angular/core';

@Injectable()
export class CustomMatPaginatorIntl extends MatPaginatorIntl {
  constructor() {
    super();  

    this.getAndInitTranslations();
  }

  getAndInitTranslations() {

      this.itemsPerPageLabel = "test";
      this.nextPageLabel = "test";
      this.previousPageLabel = "test";
      this.changes.next();

  }

 getRangeLabel = (page: number, pageSize: number, length: number) =>  {
    if (length === 0 || pageSize === 0) {
      return `0 / ${length}`;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
    return `${startIndex + 1} - ${endIndex} / ${length}`;
  }
}

Démo

Vous pouvez conserver les éléments nécessaires, ceux supprimés seront utilisés de la classe d'origine

Vous pouvez également le faire directement à partir de l'instance de pagination. Par exemple, si vous souhaitez ajouter des virgules au libellé du paginateur.

  @ViewChild(MatPaginator, { static: true })
  paginator: MatPaginator;

  decimalPipe = new DecimalPipe(navigator.language);

  ngOnInit() {
    this.paginator._intl.itemsPerPageLabel = 'Per page';
    this.paginator._intl.getRangeLabel = (page: number, pageSize: number, length: number) => {
      const start = page * pageSize + 1;
      const end = (page + 1) * pageSize;
      return `${start} - ${end} of ${this.decimalPipe.transform(length)}`;
    };
  }

MatPaginator vous permet de modifier les libellés du paginateur à l'aide de la classe MatPaginatorIntl .

Vous pouvez traduire:

• itemsPerPageLabel
• nextPageLabel
• previousPageLabel
• firstPageLabel
• lastPageLabel
• getRangeLabel

J'ai créé un localizationService avec une méthode translateMatPaginator :

    this.localizationService.translateMatPaginator(paginator);

Il vous suffit d'injecter dans votre composant et appelez:

    translateMatPaginator(paginator: MatPaginator) {
      paginator._intl.firstPageLabel = '<custom label here>';
      paginator._intl.itemsPerPageLabel = '<custom label here>';
      paginator._intl.lastPageLabel = '<custom label here>';
      paginator._intl.nextPageLabel = '<custom label here>';
      paginator._intl.previousPageLabel = '<custom label here>';
    }