Angular material table change pagination format - angular-material

Question

I am trying to implement an angular material table. I am able to show the table with data and pagination.
But currently the pagination format displaying is in the format below.
Items per page 10 1- 10 of 20
But I want the pagination format to be like this.
Items per page 10 Range: 10/20
Here is the plnkr URL.

Answer 1

1.Create a customIntl extends MatPaginatorIntl.You can replace lables of you own.
import { MatPaginatorIntl } from '#angular/material';
export class CustomMatPaginatorIntl extends MatPaginatorIntl {
getRangeLabel = function (page, pageSize, length) {
if (length === 0 || pageSize === 0) {
return '0/' + length;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
// If the start index exceeds the list length, do not try and fix the end index to the end.
const endIndex = startIndex < length ?
Math.min(startIndex + pageSize, length) :
startIndex + pageSize;
return endIndex + ' / ' + length;
};
}
2.Add a customIntl to you module where you import the MatPaginator.
imports: [
...
MatPaginatorModule,
],
providers: [
...
{provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl}
]