typescript - Cómo cambiar itemsPerPageLabel en mat-paginator en Angular 6+

Estoy usando Angular 6.0.3 con Angular Material 7.1.0, tengo mi paginador en un componente separado (que no es el app.component). Lo que he intentado hasta ahora:

Se creó un archivo ts separado llamado myPagniator.ts:

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

export class MyPaginatorLabel extends MatPaginatorIntl {

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

  constructor() {
    super();
  }
}

En mi app.module.ts: importé tanto MatPaginatorModule como MatPaginatorIntl de Angular Material. Dentro del array providers de app.module.ts, puse MyPaginatorLabel y MatPaginatorIntl.

En el componente que está usando Angular MatPaginator, extiendo la clase MyPaginatorLabel y su constructor llama al método super(), aun así muestra el texto predeterminado "itemsPerPage" después de todo esto

¿Qué he hecho mal aquí?? ¿Alguien puede darme una pista?

Respuesta #1

Crea un nuevo archivo de TypeScript y agrega una función que se exporte y devuelva un objeto MatPaginatorIntl.

Para modificar las etiquetas y el texto mostrado, cree una nueva instancia de MatPaginatorIntl e inclúyala en un proveedor personalizado - Angular Material - Paginador > API

CustomPaginatorConfiguration.ts

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

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

  customPaginatorIntl.itemsPerPageLabel = 'Custom_Label:';

  return customPaginatorIntl;
}

Luego agréguelo a app.module.ts:

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

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

También puedes configurar la opción para un componente en particular como:

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
  ]
})

StackBlitz

Respuesta #2

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

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

  }

Después de declarar el paginador, este texto se puede modificar en ngOnInit()

Respuesta #3

Otra manera de lograr el resultado.

Los módulos de la aplicación y los componentes definen MatPaginatorIntl como proveedores

  providers:[
    MatPaginatorIntl
  ]

Importa MatPaginatorIntl, decláralo en el constructor y dentro de ngOnInit define el siguiente texto.

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

  constructor(
    public _MatPaginatorIntl: MatPaginatorIntl
  ) { }

  ngOnInit() {
    this._MatPaginatorIntl.itemsPerPageLabel = 'your custom text 1';
    this._MatPaginatorIntl.firstPageLabel = 'your custom text 2';
    this._MatPaginatorIntl.itemsPerPageLabel = 'your custom text 3';
    this._MatPaginatorIntl.lastPageLabel = 'your custom text 4';
    this._MatPaginatorIntl.nextPageLabel = 'your custom text 5';
    this._MatPaginatorIntl.previousPageLabel = 'your custom text 6'; 
  }