MdPaginatorIntl Internationalization example #5573

Laurensvdw · 2017-07-07T12:25:10Z

The new paginator has a small text in the documentation about Internationalization. I was wondering if anyone has an example of doing this. The document states that you can do this by "providing your own instance of MdPaginatorIntl". I have no idea how to do this... Thanks!

jelbourn · 2017-07-07T16:15:36Z

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

CaerusKaru · 2017-07-07T16:24:02Z

Although this is not explicitly mentioned in the docs, you can infer the purpose of MdPaginatorIntl because it's listed as an Injectable class. This means that it can be leveraged with Angular Dependency Injection (DI), which you can read up on here.

When the docs say you must provide your own instance, it means extending the MdPaginatorIntl class, and then overriding the existing implementation in your component in the providers section.

ferlellws · 2017-07-07T17:18:58Z

Try in oninit this:
this.paginator._intl.itemsPerPageLabel = 'Registros por página';

Laurensvdw · 2017-07-10T08:55:17Z

Okay I solved this by using each of your solutions ;)
Adding MdPaginator to providers array =>
providers: [MdPaginator]
In the constructor inject the paginator =>
private paginator: MdPaginator
In the OnInit cycle (using translateService of ng2-translate) =>

this.translate.get('app.pagination.itemsPerPageLabel').subscribe(translation => {
   this.paginator._intl.itemsPerPageLabel = translation
});

CaerusKaru · 2017-07-10T18:07:19Z

_intl is a private data member on MdPaginator for a reason: it shouldn't be modified directly. Please follow the documentation to create your own instance of the provider, instead of violating abstraction barriers.

shlomiassaf · 2017-07-13T06:05:03Z

@Laurensvdw, actually @CaerusKaru is right but in your defence I can say you just couldn't implement it properly since MdPaginatorIntl is not exposed.

Laurensvdw · 2017-07-13T14:42:23Z

Okay that explains why I couldn't get it working with the documentation @CaerusKaru mentioned earlier about DI, as the MdPaginatorIntl was not available to place in the providers... Thanks for your findings @shlomiassaf !

jelbourn · 2017-07-13T15:28:10Z

Ah, now that is a bug. I sent #5726 to fix.

Lior-G · 2017-07-14T19:39:55Z

I'm still unclear as to the process for this.

what I understand; and please correct me wherever I'm wrong

create a new file. Let's call it: paginator.provider.ts
- import { MdPaginatorIntl } from ... not really sure
create a new Injectable similar to the original; but which extends MdPaginatorIntl
on your app.modules.ts then import your own version of the instance, lets call it: MdPaginatorProvider
add (or update) your providers array to include your instance
add it to the app constructor:
- private mdPaginatorProvider: MdPaginatorProvider

what else?

thank you in advanced

willshowell · 2017-07-20T14:28:04Z

@Lior-G see https://plnkr.co/edit/Zy0kOh78CBelkBH8VEug?p=preview. I don't know if that's the best way to do it, but it works

Lior-G · 2017-07-20T15:13:10Z

@willshowell
what version of Angular Material are you using?
MdPaginatorIntl is not exposed in in 2.0.0-beta.8 which currently is the latest release

CaerusKaru · 2017-07-20T15:55:16Z

@Lior-G The Plunkr uses the latest build from the master branch (generally a couple of commits behind the latest commit). MdPaginatorIntl is exposed as of #5716.

You can have your project rely on the latest build by following Step 1 in the Getting Started guide, just run:
npm install --save angular/material2-builds angular/cdk-builds

diarcastro · 2017-08-10T03:08:41Z

Hi, MdPaginatorIntl is exported as ex on (@angular/material/typings/index.d.ts) you can import this class like this:

import {
  ɵx as MdPaginatorIntl
} from '@angular/material';

And after:

@NgModule({
  declarations: [
  ],
  imports: [
    { provide: MdPaginatorIntl, useClass: MyClassIntl }
  ]
  , bootstrap: [AppComponent]
})
export class AppModule { }

//MyClassIntl

export class MyClassIntl {
  itemsPerPageLabel = 'Registros por página: ';
  nextPageLabel = 'Página siguiente';
  previousPageLabel = 'Página anterior';

  getRangeLabel(page: number, pageSize: number, length: number): string {
    if (length === 0 || pageSize === 0) {
      return `0 de ${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} de ${length}`;
  }
}

zggb · 2017-10-26T16:41:47Z

The cool example that @diarcastro provide unfortunately is not working on beta.10

seems that /typings/index.d.ts in beta.10 has't
export { MdPaginatorIntl as ɵx } from './paginator/paginator-intl';

mhosman · 2017-12-24T18:41:44Z

The documentation to do this is really poor. Anybody with an example for creating your own class with internationalization using for example ngx-translate? Something DYNAMIC ???

rsaulo · 2018-01-16T13:12:56Z

+1 to an example how to make this DYNAMIC!!! We use ngx-translate and cannot make this single line of the table dynamic...

rivoheinsalu · 2018-01-17T13:34:33Z

@mhosman @rsaulo This is how I did it in "@angular/material": "^5.0.3",

Create separate file e.g. custom-mat-paginator-int.ts:

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

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

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

    this.getAndInitTranslations();
  }

  getAndInitTranslations() {
    this.translate.get(['ITEMS_PER_PAGE', 'NEXT_PAGE', 'PREVIOUS_PAGE', 'OF_LABEL']).subscribe(translation => {
      this.itemsPerPageLabel = translation['ITEMS_PER_PAGE'];
      this.nextPageLabel = translation['NEXT_PAGE'];
      this.previousPageLabel = translation['PREVIOUS_PAGE'];
      this.changes.next();
    });
  }

 getRangeLabel = (page: number, pageSize: number, length: number) =>  {
    if (length === 0 || pageSize === 0) {
      return `0 / ${length}`;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
    return `${startIndex + 1} - ${endIndex} / ${length}`;
  }
}

Load and include it in providers in app.module.ts

import {CustomMatPaginatorIntl} from './shared/custom-mat-paginator-intl';

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

rsaulo · 2018-01-17T14:06:28Z

@rivoheinsalu , yes, i ended with the same solution, thanks for the reply!

mhosman · 2018-01-17T17:10:00Z

Hey @rivoheinsalu, thanks for sharing. The only problem about this is that it keeps saying for example 1 of 2. How can I change the "of"?

rivoheinsalu · 2018-01-17T17:18:56Z

@mhosman I have edited my example, see getRangeLabel.

I have not tried it with 'of', insted changed it to '/'.

You could try to set private properti and assing value in translation part:
this.ofLabel = translation['OF_LABEL']

And then try to use it in getRangeLabel(). Unfortunately I cannot currently test it.

mhosman · 2018-01-17T17:26:16Z

Great @rivoheinsalu !! Thank you very much for your help!

mhosman · 2018-01-17T18:07:39Z

Sorry I have just one last problem... I have another component with preferences. In that component I change the language. Then, I just go back to the component with the paginator and the language is not being changed (just in the paginator, in the rest of the site is working ok). The onLangChange is not working or maybe because I change the language in other component, the onLangChange is not being fired... so... the only way is to create a custom observable??

rivoheinsalu · 2018-01-18T07:22:21Z

@mhosman did you include following to providers in global (app.module.ts) as I told not in component?

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

For me it works well when changing language in one component and then navigating to component with table.

Second this.getAndInitTranslations(); in CustomMatPaginatorIntl should get translations on first load with current language and onLangChange should trigger this.getAndInitTranslations(); only when language is changed while table component is already open.

Try debugging or console logging in CustomMatPaginatorIntl and see if second this.getAndInitTranslations() is even invoked, hope I am not wrong, but I think the problem comes down to your setup somewhere.

mhosman · 2018-01-18T20:47:40Z

Yes @rivoheinsalu all setup it's okay. Paginator is working okay and current language it's okay. The only problem is with onLangChange. It's not being fired (I also put a console.log inside and nothing). Important: all the rest of the site is changing the language okay, the only problem is with the onLangChange inside this CustomMatPaginatorIntl.

dani3lrp · 2018-02-09T17:25:45Z

In my table I only added the following in the ngOnInit():

ngOnInit() {
this.paginator._intl.itemsPerPageLabel = 'Registros por página';
this.paginator._intl.nextPageLabel = 'Siguiente';
this.paginator._intl.previousPageLabel = 'Anterior';
}

duard · 2018-02-23T00:07:59Z

@dani3lrp how an I translate "1 of 10" ?

duard · 2018-02-23T00:36:05Z

@rivoheinsalu I got No provider for TranslateService! with your solution

rivoheinsalu · 2018-02-23T08:41:36Z

@duard Have you properly setup ngx-translate module importing TranslateModule.forRoot()?
See documentation from here: https://github.com/ngx-translate/core

AnimaWolf · 2018-04-19T10:22:53Z

Extending on @rivoheinsalu his answer (with 'OF' translation & unsubscribing from translate)

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

@Injectable()
export class CustomMatPaginatorIntl extends MatPaginatorIntl implements OnDestroy {

  unsubscribe: Subject<void> = new Subject<void>();
  OF_LABEL = 'of';

  constructor(private translate: TranslateService) {
    super();

    this.translate.onLangChange.takeUntil(this.unsubscribe).subscribe(() => {
      this.getAndInitTranslations();
    });

    this.getAndInitTranslations();
  }

  ngOnDestroy() {
    this.unsubscribe.next();
    this.unsubscribe.complete();
  }

  getAndInitTranslations() {
    this.translate.get([
      'PAGINATOR.ITEMS_PER_PAGE',
      'PAGINATOR.NEXT_PAGE',
      'PAGINATOR.PREVIOUS_PAGE',
      'PAGINATOR.OF_LABEL'
    ])
      .takeUntil(this.unsubscribe)
      .subscribe(translation => {
        this.itemsPerPageLabel = translation['PAGINATOR.ITEMS_PER_PAGE'];
        this.nextPageLabel = translation['PAGINATOR.NEXT_PAGE'];
        this.previousPageLabel = translation['PAGINATOR.PREVIOUS_PAGE'];
        this.OF_LABEL = translation['PAGINATOR.OF_LABEL'];
        this.changes.next();
      });
  }

  getRangeLabel = (page: number, pageSize: number, length: number) => {
    if (length === 0 || pageSize === 0) {
      return `0 ${this.OF_LABEL} ${length}`;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
    return `${startIndex + 1} - ${endIndex} ${this.OF_LABEL} ${length}`;
  };
}

Everything else is exactly the same as specified in Rivo's answer

ThibaudAV · 2018-07-26T08:43:47Z

Here is my test file for the code above. If you like to have code coverage 💯 :

import { TestBed } from '@angular/core/testing';
import { async } from '@angular/core/testing';
import { TranslateCompiler, TranslateFakeCompiler, TranslateModule, TranslateService } from '@ngx-translate/core';
import { CustomMatPaginatorIntl } from './custom-matPaginatorIntl.service';

describe('CustomMatPaginatorIntl', () => {
  let service: CustomMatPaginatorIntl;
  let translateService: TranslateService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [CustomMatPaginatorIntl],
      imports: [
        TranslateModule.forRoot({
          compiler: { provide: TranslateCompiler, useClass: TranslateFakeCompiler },
        }),
      ],
    });
    translateService = TestBed.get(TranslateService);
    translateService.langs = ['fr', 'en'];
    translateService.currentLang = 'fr';
    translateService.setTranslation('en', { 'translation.paginator.items-per-page': 'Item per page' });
    translateService.setTranslation('fr', { 'translation.paginator.items-per-page': 'Éléments par page' });

    service = TestBed.get(CustomMatPaginatorIntl);
  }));

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should get the translation from TranslateService', () => {
    expect(service.itemsPerPageLabel).toEqual('Éléments par page');
    expect(service.nextPageLabel).toEqual('translation.paginator.next-page');
    expect(service.previousPageLabel).toEqual('translation.paginator.previous-page');
    expect(service.ofLabel).toEqual('translation.paginator.of-label');
    expect(service.getRangeLabel(1, 10, 20)).toEqual('11 - 20 translation.paginator.of-label 20');
  });

  describe('when language change', () => {
    it('should changes the translation language', (done: any) => {
      service.changes.subscribe(() => {
        expect(service.itemsPerPageLabel).toEqual('Item per page');
        done();
      });
      translateService.use('en');
    });
  });
});

djidel · 2018-10-01T13:00:17Z

@AnimaWolf in my case ngOnDestroy never get called, have you tested your implementation of OnDestroy?

broweratcognitecdotcom · 2018-10-30T13:59:55Z

Are they joking with this??? Refactor. Provide simple inputs. Please.

kklimczak · 2019-03-04T10:12:49Z

I published an article about this:
https://medium.com/front-dev/translate-your-matpaginator-with-ngx-translate-and-stay-reactive-4c7b145cae9?source=friends_link&sk=0873eaf5120c85277be9c07cfbf044e4

gotwig · 2019-03-08T09:31:16Z

WoW- I just found one of the ugliest sides of angular material...

knoefel · 2019-04-18T13:54:28Z

The subscription to this.translate.onLangChange is unnecessary when you use this.translate.stream instead of this.translate.get, because it will execute everytime the language changes. So the following implementation is the same as @AnimaWolf's answer, but a little shorter:

`

import { MatPaginatorIntl } from "@angular/material";
import { TranslateService } from "@ngx-translate/core";
import { OnDestroy, Injectable } from "@angular/core";
import { takeUntil } from "rxjs/operators";
import { Subject } from "rxjs";

@Injectable()
export class MatPaginatorI18n extends MatPaginatorIntl implements OnDestroy {
    private onDestroy$: Subject<boolean> = new Subject();

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

        this.translate
            .stream([
                "MATERIAL.PAGINATOR.ITEMS_PER_PAGE",
                "MATERIAL.PAGINATOR.NEXT_PAGE",
                "MATERIAL.PAGINATOR.PREVIOUS_PAGE",
                "MATERIAL.PAGINATOR.FIRST_PAGE",
                "MATERIAL.PAGINATOR.LAST_PAGE"
            ])
            .pipe(takeUntil(this.onDestroy$))
            .subscribe(translations => {
                this.itemsPerPageLabel = translations["MATERIAL.PAGINATOR.ITEMS_PER_PAGE"];
                this.nextPageLabel = translations["MATERIAL.PAGINATOR.NEXT_PAGE"];
                this.previousPageLabel = translations["MATERIAL.PAGINATOR.PREVIOUS_PAGE"];
                this.firstPageLabel = translations["MATERIAL.PAGINATOR.FIRST_PAGE"];
                this.lastPageLabel = translations["MATERIAL.PAGINATOR.LAST_PAGE"];
                this.getRangeLabel = this.getRangeLabel.bind(this);

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

    ngOnDestroy(): void {
        this.onDestroy$.next();
        this.onDestroy$.complete();
    {


    getRangeLabel = (page: number, pageSize: number, length: number): string => {
        if (length === 0 || pageSize === 0) {
            return this.translate.instant("MATERIAL.PAGINATOR.RANGE_LABEL_NO_ITEMS", { 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 this.translate.instant("MATERIAL.PAGINATOR.RANGE_LABEL", {
            startIndex: startIndex + 1,
            endIndex,
            length
        });
    }
}

`

angular-automatic-lock-bot · 2019-09-10T18:02:50Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

jelbourn closed this as completed Jul 7, 2017

shlomiassaf mentioned this issue Jul 13, 2017

MdPaginatorIntl is not exposed. #5715

Closed

donroyco mentioned this issue Jul 20, 2017

[Paginator] Unclear in docs about how to set language #5902

Closed

willshowell mentioned this issue Sep 25, 2017

Paginator status like 1-10 of 10+ when data length is not known #7289

Closed

KevinJue mentioned this issue Sep 26, 2018

MatPaginator template internationalization #12322

Open

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019

MdPaginatorIntl Internationalization example #5573

MdPaginatorIntl Internationalization example #5573

Comments

Laurensvdw commented Jul 7, 2017

jelbourn commented Jul 7, 2017

CaerusKaru commented Jul 7, 2017

ferlellws commented Jul 7, 2017

Laurensvdw commented Jul 10, 2017

CaerusKaru commented Jul 10, 2017

shlomiassaf commented Jul 13, 2017

Laurensvdw commented Jul 13, 2017

jelbourn commented Jul 13, 2017

Lior-G commented Jul 14, 2017

willshowell commented Jul 20, 2017

Lior-G commented Jul 20, 2017

CaerusKaru commented Jul 20, 2017 • edited Loading

diarcastro commented Aug 10, 2017 • edited Loading

zggb commented Oct 26, 2017 • edited Loading

mhosman commented Dec 24, 2017 • edited Loading

rsaulo commented Jan 16, 2018

rivoheinsalu commented Jan 17, 2018 • edited Loading

rsaulo commented Jan 17, 2018

mhosman commented Jan 17, 2018

rivoheinsalu commented Jan 17, 2018

mhosman commented Jan 17, 2018

mhosman commented Jan 17, 2018 • edited Loading

rivoheinsalu commented Jan 18, 2018

mhosman commented Jan 18, 2018 • edited Loading

dani3lrp commented Feb 9, 2018

duard commented Feb 23, 2018

duard commented Feb 23, 2018

rivoheinsalu commented Feb 23, 2018

AnimaWolf commented Apr 19, 2018

ThibaudAV commented Jul 26, 2018

djidel commented Oct 1, 2018

broweratcognitecdotcom commented Oct 30, 2018

kklimczak commented Mar 4, 2019

gotwig commented Mar 8, 2019

knoefel commented Apr 18, 2019

angular-automatic-lock-bot bot commented Sep 10, 2019

CaerusKaru commented Jul 20, 2017 •

edited

Loading

diarcastro commented Aug 10, 2017 •

edited

Loading

zggb commented Oct 26, 2017 •

edited

Loading

mhosman commented Dec 24, 2017 •

edited

Loading

rivoheinsalu commented Jan 17, 2018 •

edited

Loading

mhosman commented Jan 17, 2018 •

edited

Loading

mhosman commented Jan 18, 2018 •

edited

Loading