How to change itemsPerPageLabel in mat-paginator (Angular 4)

Question

I'm working with Angular 4 and I need to change paginator's value "Items per page". How can I get this value?

HTML:

<mat-paginator class="mat-paginator" #paginator [length]="table_data && table_data.resultsLength" [pageSizeOptions]="[10, 25, 100]" [pageSize]="customerMessageService.rowsNumber">
</mat-paginator>

In documentation is said:

To modify the labels and text displayed, create a new instance of MatPaginatorIntl and include it in a custom provider

I imported {MatPaginatorModule} from "@angular/material" and put MatPaginatorIntl in providers.

What should I do then in my .ts file?

Is it right to put this in my component.ts?

export class MatPaginatorIntl {
  itemsPerPageLabel = "1234";
}

Answer 1

To customize/change the itemsPerPageLabel we need to extends MatPaginatorIntl class in your Component class and also need to provide in providers array inside your module.

app.component.ts-

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

export class AppComponent extends MatPaginatorIntl {

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

  constructor() {
    super();
  }
}

app.component.html-

 <mat-paginator> </mat-paginator>

app.module.ts-

import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    MatPaginatorModule
  ]
    providers: [
    { provide: MatPaginatorIntl, useClass: AppComponent }
  ]
})

---

We can also change following labels from MatPaginatorIntl class :-

• itemsPerPageLabel: string;
  (A label for the page size selector.)
• nextPageLabel: string;
  (A label for the button that increments the current page.)
• previousPageLabel: string;
  (A label for the button that decrements the current page.)
• firstPageLabel: string;
  (A label for the button that decrements the current page.)
• lastPageLabel: string;
  (A label for the button that moves to the last page.)