74

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 article showing how to do this and I followed the steps:

1 - I created a file called custom-paginator.ts and put the following there:

import { MatPaginator, MatPaginatorIntl } from '@angular/material';

export class CustomPaginator extends MatPaginatorIntl {
  constructor() {
    super();
    this.nextPageLabel = ' My new label for next page';
    this.previousPageLabel = ' My new label for previous page';
    this.itemsPerPageLabel = 'Task per screen';
  }
}

2 - In app.module.ts I put:

@NgModule({
  // ...
  providers: [
    {
      provide: MatPaginatorIntl,
      useClass: CustomPaginator
    }
  ]
})
export class AppModule

However, it simply doesn't change nothing. What am I missing?

1
  • You should remove initialization of labels from constructor and it should work. Commented Oct 23, 2017 at 9:08

12 Answers 12

117

You can do it like this: I'm providing you with croatian labels:

customClass.ts

import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';

@Injectable()
export class MatPaginatorIntlCro extends MatPaginatorIntl {
  itemsPerPageLabel = 'Stavki po stranici';
  nextPageLabel     = 'Slijedeća stranica';
  previousPageLabel = 'Prethodna stranica';

  getRangeLabel = (page: number, pageSize: number, length: number) => {
    if (length === 0 || pageSize === 0) {
      return '0 od ' + length;
    }

    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    // If the start index exceeds the list length, do not try and fix the end index to the end.
    const endIndex = startIndex < length ?
      Math.min(startIndex + pageSize, length) :
      startIndex + pageSize;
    return startIndex + 1 + ' - ' + endIndex + ' od ' + length;
  };
}

and AppModule.ts:

providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],
4
  • 1
    Since angular 9 you can implement the above solution using $localize, so that all actual localizations will be done in messages.xlf files. For example: itemsPerPageLabel = $localize`Items per page` Commented Jan 7, 2021 at 1:21
  • 1
    I think it can just be " const endIndex = Math.min(startIndex + pageSize, length) " ? Commented Feb 17, 2022 at 18:02
  • To get this to work I had to add 'override' to the members of my custom class: override lastPageLabel = 'lastPageText'; Commented Dec 6, 2023 at 13:41
  • all answers on this Q/A are missing out on the firstPageLabel / lastPageLabel assignments. Have those only been introduced recently? anyway, I implemented this using this here great example, on Angular 18, noticing that in order for the translation to be complete, I also need to assign new strings to those two. Commented Dec 1 at 16:46
56

Based on Vinko Vorih code, I made a paginator working with ngx-translate, here is the code :

import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from "@ngx-translate/core";

export class PaginatorIntlService extends MatPaginatorIntl {
  translate: TranslateService;

  getRangeLabel = function (page, pageSize, length) {
    const of = this.translate ? this.translate.instant('paginator.of') : 'of';
    if (length === 0 || pageSize === 0) {
      return '0 ' + of + ' ' + length;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    // If the start index exceeds the list length, do not try and fix the end index to the end.
    const endIndex = startIndex < length ?
      Math.min(startIndex + pageSize, length) :
      startIndex + pageSize;
    return startIndex + 1 + ' - ' + endIndex + ' ' + of + ' ' + length;
  };

  injectTranslateService(translate: TranslateService) {
    this.translate = translate;

    this.translate.onLangChange.subscribe(() => {
      this.translateLabels();
    });

    this.translateLabels();
  }

  translateLabels() {
    super.itemsPerPageLabel = this.translate.instant('paginator.items_per_page');
    super.nextPageLabel = this.translate.instant('paginator.next_page');
    super.previousPageLabel = this.translate.instant('paginator.previous_page');
    this.changes.next();
  }

}

And then in your module providers entry :

{
  provide: MatPaginatorIntl,
  useFactory: (translate) => {
    const service = new PaginatorIntlService();
    service.injectTranslateService(translate);
    return service;
  },
  deps: [TranslateService]
}

This way, you can store translations in your usual i18n file and if your web app is able to dynamically change locale, paginator will be translated on demand.

6
  • 1
    I am trying to use this and it all works as expected except for the initial load. When the site is rendered there is no language loaded yet and I need trigger a rerender for the translation to kick in. Do you have a solution?
    – Aidin
    Commented Jul 4, 2018 at 11:01
  • It works. I used it with storageLayerService to take the lang from the local storage ;)
    – Joe Allen
    Commented Aug 13, 2018 at 15:50
  • 1
    I pretty much copy-pasted this for testing purposes, and it doesn't seem to work as expected. When I change the language, the paginator isn't updated. I have to hover over one of the buttons to trigger the update.
    – Pamasich
    Commented Aug 22, 2018 at 9:06
  • 2
    @Pamasich try to add this.changes.next() at the end of the translateLabels method. Commented Apr 10, 2019 at 17:29
  • 2
    A nicer way to inject TranslateService is in the constructor, and then, in the factory call new PaginatorIntlService(translate)
    – Random
    Commented Jun 18, 2020 at 19:13
24

If you want a dynamic language switch with ngx-translate to work for you, here’s the solution, it works for me.

mat-paginator-i18n.service.ts

import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
import { Injectable } from '@angular/core';

const ITEMS_PER_PAGE = 'Items per page:';
const NEXT_PAGE = 'Next page';
const PREV_PAGE = 'Previous page';
const FIRST_PAGE = 'First page';
const LAST_PAGE = 'Last page';

@Injectable()
export class MatPaginatorI18nService extends MatPaginatorIntl {
  public constructor(private translate: TranslateService) {
    super();

    this.translate.onLangChange
    //.pipe(takeUntil(...))
    .subscribe((e: Event) => {
      this.getAndInitTranslations();
    });

    this.getAndInitTranslations();
  }

  public getRangeLabel = (page: number, pageSize: number, length: number): string => {
    if (length === 0 || pageSize === 0) {
      return `0 / ${length}`;
    }

    length = Math.max(length, 0);

    const startIndex: number = page * pageSize;
    const endIndex: number = startIndex < length
      ? Math.min(startIndex + pageSize, length)
      : startIndex + pageSize;

    return `${startIndex + 1} - ${endIndex} / ${length}`;
  };

  public getAndInitTranslations(): void {
    this.translate.get([
      ITEMS_PER_PAGE,
      NEXT_PAGE,
      PREV_PAGE,
      FIRST_PAGE,
      LAST_PAGE,
    ])
    .subscribe((translation: any) => {
      this.itemsPerPageLabel = translation[ITEMS_PER_PAGE];
      this.nextPageLabel = translation[NEXT_PAGE];
      this.previousPageLabel = translation[PREV_PAGE];
      this.firstPageLabel = translation[FIRST_PAGE];
      this.lastPageLabel = translation[LAST_PAGE];

      this.changes.next();
    });
  }
}

In your module AppModule

@NgModule({
  // ...
  providers: [
    {
      provide: MatPaginatorIntl,
      useClass: MatPaginatorI18nService,
    },
  ],
})
export class AppModule {
// ...

en.json, etc.

{
  "Items per page:": "Items per page:",
  "Next page": "Next page",
  "Previous page": "Previous page",
  "First page": "First page",
  "Last page": "Last page",
}
2
  • I know this is an old question and you might not have the answer to it, but my HTML doesn't seem to update. I debugged and the values of the properties in the MatPaginatorI18nService do change correctly when the languages change, but the view doesn't update. Any solution to this? Commented Sep 18, 2020 at 8:53
  • @RubenSzekér Hello! If you do everything like the example above, I have no idea. Maybe something with change detection in your component. If you could reproduce this on stackblitz I would take a look.
    – PlusMinus
    Commented Sep 19, 2020 at 20:32
14

in file: matPaginatorIntlCroClass.ts

import {MatPaginatorIntl} from '@angular/material';
export class MatPaginatorIntlCro extends MatPaginatorIntl {
  itemsPerPageLabel = 'Items par page';
  nextPageLabel     = 'Page Prochaine';
  previousPageLabel = 'Page Précedente';
}

in File: AppModule.ts:

import { MatPaginatorModule, MatPaginatorIntl} from '@angular/material';
import { MatPaginatorIntlCro } from './matPaginatorIntlCroClass'

@NgModule({
  imports: [],
  providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],
  ..
})

Source: https://material.angular.io/components/paginator/api

1
  • This is pretty straightforward.
    – chitgoks
    Commented Mar 8 at 7:09
6

I did some modifications to fix the end index when start index exceed the list length. I also add the translation for first and last page. It is for @angular/material 5.2.4 pagination component.

import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';

@Injectable()
export class MatPaginationIntlService extends MatPaginatorIntl {
  translate: TranslateService;
  firstPageLabel = 'First page';
  itemsPerPageLabel = 'Items per page';
  lastPageLabel = 'Last page';
  nextPageLabel = 'Next page';
  previousPageLabel = 'Previous page';

  getRangeLabel = (page: number, pageSize: number, length: number): string => {
    const of = this.translate ? this.translate.instant('mat-paginator-intl.of') : 'of';
    if (length === 0 || pageSize === 0) {
      return '0 ' + of + ' ' + length;
    }
    length = Math.max(length, 0);
    const startIndex = ((page * pageSize) > length) ?
      (Math.ceil(length / pageSize) - 1) * pageSize:
      page * pageSize;

    const endIndex = Math.min(startIndex + pageSize, length);
    return startIndex + 1 + ' - ' + endIndex + ' ' + of + ' ' + length;
  };

  injectTranslateService(translate: TranslateService) {
    this.translate = translate;

    this.translate.onLangChange.subscribe(() => {
      this.translateLabels();
    });

    this.translateLabels();
  }

  translateLabels() {
    this.firstPageLabel = this.translate.instant('mat-paginator-intl.first_page');
    this.itemsPerPageLabel = this.translate.instant('mat-paginator-intl.items_per_page');
    this.lastPageLabel = this.translate.instant('mat-paginator-intl.last_page');
    this.nextPageLabel = this.translate.instant('mat-paginator-intl.next_page');
    this.previousPageLabel = this.translate.instant('mat-paginator-intl.previous_page');
  }
}
5

In order to refresh the label, you can fire a change event after the label change:

translateLabels() {
    this.firstPageLabel = this.translate.instant('mat-paginator-intl.first_page');
    ...
    this.changes.next();
}
2

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 },
        ...
      ]
1

Based on answers above, using ngx-translate

import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';
import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';

@Injectable()
export class MatPaginatorIntlNl extends MatPaginatorIntl {
  itemsPerPageLabel!: string;
  nextPageLabel!: string;
  previousPageLabel!: string;
  ofLabel!: string;

  constructor(private readonly translateService: TranslateService) {
    super();

    this.getTranslations();
  }

  async getTranslations() {
    const translations = await this.translateService
      .get(['TABLE.ITEMS_PER_PAGE', 'TABLE.NEXT_PAGE', 'TABLE.PREVIOUS_PAGE', 'COMMON.OF'])
      .pipe(take(1))
      .toPromise();

    this.itemsPerPageLabel = translations['TABLE.ITEMS_PER_PAGE'];
    this.nextPageLabel = translations['TABLE.NEXT_PAGE'];
    this.previousPageLabel = translations['TABLE.PREVIOUS_PAGE'];
    this.ofLabel = translations['COMMON.OF'];
  }

  getRangeLabel = (page: number, pageSize: number, length: number): string => {
    if (length === 0 || pageSize === 0) {
      return `0 ${this.ofLabel} ${length}`;
    }

    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    // If the start index exceeds the list length, do not try and fix the end index to the end.
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
    return `${startIndex + 1} - ${endIndex} ${this.ofLabel} ${length}`;
  };
}
0

Inject MatPaginatorIntl anywhere in your application, set desired translations and call changes.next(). Repeat on every language change (e.g. by subscribing to onLangChange when using ngx-translate).

0

I had the same issue, and then I changed in app.module.ts in the imports statement TranslateModule to TranslateModule.forRoot()

So it looks like this:

imports: [
    ...
    TranslateModule.forRoot()
    ...
]

Quote from NPM's site: "The forRoot static method is a convention that provides and configures services at the same time. Make sure you only call this method in the root module of your application, most of the time called AppModule. This method allows you to configure the TranslateModule by specifying a loader, a parser and/or a missing translations handler."

Here is the whole article: https://www.npmjs.com/package/@ngx-translate/core

Reading this can help resolving many issues with TranslateModule!

0

One important thing to mention is to use useClass instead of useValue, when providing custom implementations as classes. This seems quite obvious, but can be easily overlooked as some guides still use useValue and provide functions.

{
  provide: MatPaginatorIntl, 
  useClass: LocalizedPaginator
}
0

After checking many options what works in my case and I think that is most robust solutions for translating paginator strings dynamically is given below.

mat-paginator-translator.ts // Add this file in project

import {Injectable} from '@angular/core';
import {MatPaginatorIntl} from '@angular/material/paginator';
import {TranslateService} from '@ngx-translate/core';

@Injectable()
export class MatPaginatorTranslator extends MatPaginatorIntl {

itemsPerPageLabel: string;
nextPageLabel: string;
previousPageLabel: string;
firstPageLabel: string;
lastPageLabel: string;

constructor(private translateService: TranslateService) {
    super();
}

getRangeLabel = (page: number, pageSize: number, length: number) => {
    this.getTranslations();
    return ((page * pageSize) + 1) + ' - ' + ((page * pageSize) + pageSize)
        + ' ' + this.translateService.instant('of') + ' ' + length;
};

private getTranslations() {
    this.itemsPerPageLabel = this.translateService.instant('Items per page');
    this.nextPageLabel = this.translateService.instant('Next page');
    this.previousPageLabel = this.translateService.instant('Previous page');
    this.firstPageLabel = this.translateService.instant('First page');
    this.lastPageLabel = this.translateService.instant('Last page');
}
}

app.module.ts // Add following changes in app module

providers: [{
    provide: MatPaginatorIntl,
    useClass: MatPaginatorTranslator
}],

de.json // This can be any translation json file

"Next page": "Nächste Seite",
"Previous page": "Vorherige Seite",
"First page": "Nächste Seite",
"Last page": "Nächste Seite",
"of": "von",

Put these files at right place and you will have the solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.