Q:

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

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";
}

A:

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.)

