How To Change itemsPerPageLabel in mat-paginator in Angular 6+
Create a new TypeScript file and add a function that is exported and returns a MatPaginatorIntl
object.
To modify the labels and text displayed, create a new instance of MatPaginatorIntl and include it in a custom provider - Angular Material - Paginator > API
CustomPaginatorConfiguration.ts
import { MatPaginatorIntl } from '@angular/material';
export function CustomPaginator() {
const customPaginatorIntl = new MatPaginatorIntl();
customPaginatorIntl.itemsPerPageLabel = 'Custom_Label:';
return customPaginatorIntl;
}
Then add it to app.module.ts
:
import { MatPaginatorIntl } from '@angular/material';
import { CustomPaginator } from './app/CustomPaginatorConfiguration';
@NgModule({
// ...
providers: [
{ provide: MatPaginatorIntl, useValue: CustomPaginator() }
]
})
You can also set the setting for a particular component like:
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
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
ngOnInit() {
this.paginator._intl.itemsPerPageLabel="Test String";
}
After declaring paginator, this text can be modified in ngOnInit()
Another way to achieve the result.
App and component modules define MatPaginatorIntl as providers
providers:[
MatPaginatorIntl
]
Import MatPaginatorIntl, declare on the construtor and inside ngOnInit define the next text.
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';
}