MdPaginatorIntl Internationalization example

[Laurensvdw]

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]

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

[CaerusKaru]

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]

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

[Laurensvdw]

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]

_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]

@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]

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]

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

[Lior-G]

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]

@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]

@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]

@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