CODEWITHSUNDEEP
angularangular-material2
bigmeister
bigmeister

Reputation: 1227

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

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

enter image description here

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

Upvotes: 8

Views: 10195

Answers (3)

Venicyus Venceslencio
Venicyus Venceslencio

Reputation: 69

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

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

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

Upvotes: 5

megalucio
megalucio

Reputation: 5411

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

Upvotes: 0

Shadowlauch
Shadowlauch

Reputation: 621

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

Upvotes: 6

Related Questions