# Solvedcomponents MdPaginatorIntl Internationalization example

## ✔️Accepted Answer

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

## Other Answers:

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}`;
}
}
```

Try in oninit this:

this.paginator._intl.itemsPerPageLabel = 'Registros por página';

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

@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

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!