[Fixed] Angular Material MatPaginator can not be translated

Issue

I want to translate in matpaginator labels for itemsPerPageLabel, nextPageLabel, previousPageLabel, firstPageLabel, lastPageLabel

But I tried to create class like this and it doesn’t work. I mean subscription works, but when I change language, the label can not be changed

@Injectable()
export class MatPaginatorCustom extends MatPaginatorIntl {
    constructor(public translateService: TranslateService) {
        super();
        this.translateService.stream('vehicle.ubdate.matSnackBar.message')
            .subscribe(labelValue => {
                console.log(labelValue);
                this.itemsPerPageLabel = labelValue;
            });
    }
}

I use Angular 8 with ngx-translate

Solution

You can use onLangChange method in your constructor.
for example:

@Injectable()
export class MatPaginatorCustom extends MatPaginatorIntl {
constructor(public translateService: TranslateService) {
    super();
    this.translateService.onLangChange.subscribe(event => {

            this.translate.get('vehicle.ubdate.matSnackBar.message')
               .subscribe(labelValue => {
            console.log(labelValue);
            this.itemsPerPageLabel = labelValue;
           
            // must call this method after change label.
            this.changes.next();
        });

     });
}

}

Leave a Reply

(*) Required, Your email will not be published