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

score 6 · Answer 1 · answered Nov 24 '17 at 09:02

6

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

answered Nov 24 '17 at 09:02

Shadowlauch

581
1
5
13

Do I have to put @Injectable() in my component .ts file? Somwhere under ngOnInit()? – bigmeister Nov 24 '17 at 09:22
You can have it somewhere in your component at the bottom or in a new file. – Shadowlauch Nov 24 '17 at 09:29
Ok, I got it, thank you. Do you have any ideas what can I do, if I want to have also translation to other language and how to implement it? – bigmeister Nov 24 '17 at 09:31
I'm not 100% sure, but I think the best way would be to not handcode the labels in your extended MatPaginatorIntl, but to load them via a service, depending on the current language. – Shadowlauch Nov 24 '17 at 09:39

score 5 · Answer 2 · answered Jul 13 '18 at 20:37

5

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

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

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

answered Jul 13 '18 at 20:37

Venicyus Venceslencio

69
1
2

2

Instead of posting an exact answer from another question (only with less context), it would be better to flag this question as a duplicate of the other question. – CertainPerformance Jul 13 '18 at 21:03
1

Excellent and quick answer. Thanks for it – imans77 Feb 05 '19 at 20:13

score 0 · Answer 3 · answered Dec 06 '17 at 23:55

0

Create a new instance of MatPaginatorIntl and include it in a custom provider as explained in angular material documentation.

answered Dec 06 '17 at 23:55

megalucio

5,051
2
22
26

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

3 Answers3