How to use MatPaginatorIntl?

Question

I\'m using MatPaginator component and I\'m trying to figure out how to translate those labels (documentation isn\'t clear enough about this).

I\'ve found this articl

Answer 1

Additionally you can use injected services by marking the Intl to be an injectable itself. See example (ignore specifics of DoneSubject and LocalizeService as those are custom implementations):

    import { Injectable, OnDestroy } from '@angular/core';
    import { MatPaginatorIntl } from '@angular/material';
    import { LocalizeService } from 'app/general';
    import { DoneSubject } from 'app/rx';
    import { takeUntil } from 'rxjs/operators';

    @Injectable()
    export class MatPaginatorIntlLoc extends MatPaginatorIntl implements OnDestroy {
      constructor(private readonly localizer: LocalizeService) {
        super();

        localizer.locale$.pipe(takeUntil(this.done$)).subscribe(() => {
          this.itemsPerPageLabel = localizer.translate('mat paginator label: items per page');
          this.nextPageLabel = localizer.translate('mat paginator label: next page');
          this.previousPageLabel = localizer.translate('mat paginator label: previous page');
          this.firstPageLabel = localizer.translate('mat paginator label: first page');
          this.lastPageLabel = localizer.translate('mat paginator label: last page');
        });
      }

      private readonly done$ = new DoneSubject();

      ngOnDestroy() { this.done$.done(); }

      getRangeLabel = (page: number, pageSize: number, length: number) => this.localizer
        .translate('mat paginator label: x of y', [
          length > 0 && pageSize > 0 ? (page * pageSize + 1) + ' - ' + Math.min((page + 1) * pageSize, Math.max(length, 0)) : 0,
          Math.max(length, 0),
        ]);
    }

And don't forget to provide it in your module:

    providers: [
        ...
        { provide: MatPaginatorIntl, useClass: MatPaginatorIntlLoc },
        ...
      ]