6
votes

Comment changer les élémentsPerPageLabel dans mat-paginator dans Angular 6+

J'utilise Angular 6.0.3 avec Angular Material 7.1.0, j'ai mon paginateur dans un composant séparé (qui n'est pas l'app.component). Ce que j'ai essayé jusqu'à présent:

J'ai créé un fichier ts séparé appelé myPagniator.ts:

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

export class MyPaginatorLabel extends MatPaginatorIntl {

  itemsPerPageLabel = 'custome_label_name'; // customize item per page label

  constructor() {
    super();
  }
}

Dans mon app.module.ts: j'ai importé à la fois MatPaginatorModule, MatPaginatorIntl d'Angular Matériel. À l'intérieur du tableau des fournisseurs de app.module.ts, j'ai mis MyPaginatorLabel et MatPaginatorIntl.

Dans le composant qui utilise Angular MatPaginator, j'étends la classe MyPaginatorLabel et son constructeur appelle la méthode super (), mais il affiche texte par défaut "itemsPerPage" après tout cela

Qu'est-ce que j'ai fait de mal ici ?? Quelqu'un peut-il me donner un petit indice?

typescript angular-material angular6 pagination

0 commentaires

3 Réponses :

11
votes

Créez un nouveau fichier TypeScript et ajoutez une fonction qui est exportée et renvoie un objet MatPaginatorIntl .

Pour modifier les libellés et le texte affichés, créez une nouvelle instance de MatPaginatorIntl et incluez-la dans un fournisseur personnalisé - Matériau angulaire - Paginator> API

CustomPaginatorConfiguration.ts

import { CustomPaginator } from './CustomPaginator';
import { MatPaginatorIntl } from '@angular/material';
/**
 * @title Paginator
 */
@Component({
  selector: 'your_component',
  templateUrl: 'your_component.html',
  providers: [
    { provide: MatPaginatorIntl, useValue: CustomPaginator() }  // Here
  ]
})

Ensuite, ajoutez-le à app.module.ts :

import { MatPaginatorIntl } from '@angular/material';
import { CustomPaginator } from './app/CustomPaginatorConfiguration';

@NgModule({
  // ...
  providers: [
    { provide: MatPaginatorIntl, useValue: CustomPaginator() }
  ]
})

Vous pouvez également définir le paramètre pour un composant particulier comme:

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

export function CustomPaginator() {
  const customPaginatorIntl = new MatPaginatorIntl();

  customPaginatorIntl.itemsPerPageLabel = 'Custom_Label:';

  return customPaginatorIntl;
}

StackBlitz

1 commentaires

Merci Prashant Pimpale, c'est la réponse à ma question!

0
votes

this.dataSource.paginator._intl.itemsPerPageLabel ='Nombre de Session par page';

2 commentaires

Veuillez ne pas publier uniquement le code comme réponse, mais inclure également une explication de ce que fait votre code et comment il résout le problème de la question. Les réponses avec une explication sont généralement de meilleure qualité et sont plus susceptibles d'attirer des votes positifs.

Cela ne fonctionne pas ou du moins ne suffit pas. Veuillez mieux expliquer la réponse

3
votes

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

  ngOnInit() {
    this.paginator._intl.itemsPerPageLabel="Test String";

  }
After declaring paginator, this text can be modified in ngOnInit()

2 commentaires

Le paginateur que j'utilise est comme ça. import {PageEvent, MatPaginator} depuis '@ angular / material / paginator'; @ViewChild ('paginator') paginator: MatPaginator; Dans le ngOnInit () je ne peux pas obtenir le paginateur (non défini) savez-vous où est le problème?

pouvez-vous aussi ajouter du HTML? Je ne sais pas quelle est la raison exacte de votre problème, mais stackoverflow Le problème .com / questions / 48785965 /… peut vous éclairer