Angular 4; paginator's "items per page" translation

Question

I'm using material design on Angular 4. I have a table with paginator on the bottom:

Is there any way to translate "Items per page" in Angular4?

I got access to this label by

this.paginator._intl.itemsPerPageLabel

in .ts file of my component, which I put in ngOnInit()

I also have translations in i18n fo .json file, which structure is:

"MESSAGES_LIST_TABLE": {
      "DATE": "Date",
      "FROM": "From",
      "TO": "To",
      "MESSAGE": "Message",
      "AMOUNT": "Amount",
      "BALANCE": "Balance",
      "AVAILABLE_BALANCE": "Avail. bal",
      "ITEMS_PER_PAGE": "Items per page"
}

Can I somehow translate it like this?

this.paginator._intl.itemsPerPageLabel = {{'CUSTOMER.MESSAGES_LIST_TABLE.ITEMS_PER_PAGE' | translate}}

Answer 1

You make an Injectable extending from MatPaginatorIntl

@Injectable()
export class MatPaginatorIntlGerman extends MatPaginatorIntl {
    itemsPerPageLabel = 'Pro Seite: ';
    nextPageLabel = 'Nächste Seite';
    previousPageLabel = 'Vorherige Seite';

    getRangeLabel = (page: number, pageSize: number, length: number) => {
        return ((page * pageSize) + 1) + ' - ' + ((page * pageSize) + pageSize) + ' von ' + length;
    }
}

And provide it like this in your module

{
    provide: MatPaginatorIntl,
    useClass: forwardRef(() => MatPaginatorIntlGerman)
}

Answer 2

https://stackoverflow.com/a/51113262/7296430

//Atribute @ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit(){ ... this.paginator._intl.itemsPerPageLabel = 'My translation for items per page.'; ... }