How to translate mat-paginator in Angular 4?

by

You can use the MatPaginatorIntl for this. Will Howell made an example that no longer works, so here is an updated version (with Dutch) and step-by-step guidance.

  1. Import the MatPaginatorIntl from @angular/material into your application.
  2. Create a new paginator file for your locale (in this example I use Dutch) and import that: import { getDutchPaginatorIntl } from './app/dutch-paginator-intl'; in main.ts file
  3. Set a provider for the Paginator inside of the main.ts file, so it takes the translations of your local file (instead of English as default language):
providers: [
   { provide: MatPaginatorIntl, useValue: getDutchPaginatorIntl() }
]
  1. Inside your paginator-intl file, set the labels for the strings that can be translated and export these. Most important part of that file (see the example for more info):
paginatorIntl.itemsPerPageLabel="Items per pagina:";
paginatorIntl.firstPageLabel="Eerste pagina";
paginatorIntl.previousPageLabel="Vorige pagina";
paginatorIntl.nextPageLabel="Volgende pagina";
paginatorIntl.lastPageLabel="Laatste pagina";
paginatorIntl.getRangeLabel = dutchRangeLabel;

Example on StackBlitz with the paginator translations file as starting point.

June 2018 – Update to Angular 6.x
This updated Example on StackBlitz is upgraded to Angular 6.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

June 2019 – Update to Angular 8.x
This updated Example on StackBlitz is upgraded to Angular 8.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

February 2020 – Update to Angular 9.x
This updated Example on StackBlitz is upgraded to Angular 9.x to accommodate the latest version of the framework. Package versions have changed. Major change is the way to import from Angular Material. You cannot import from Material root anymore. You need to specify the import from the module (material/paginator) itself:

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

June 2020 – Update to Angular 10.x
This updated Example on StackBlitz is upgraded to Angular 10.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

December 2020 – Update to Angular 11.x
This updated Example on StackBlitz is upgraded to Angular 11.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

May 2021 – Update to Angular 12.x
This updated Example on StackBlitz is upgraded to Angular 12.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

January 2022 – Update to Angular 13.x
This updated Example on StackBlitz is upgraded to Angular 13.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

June 2022 – Update to Angular 14.x
This updated Example on StackBlitz is upgraded to Angular 14.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

November 2022 – Update to Angular 15.x
This updated Example on StackBlitz is upgraded to Angular 15.x to accommodate the latest version of the framework. Only packages have changed, nothing inside the paginator has changed.

More Related Contents:

  1. Working example of Angular 2.0 Material MdDialog with Angular 2.0
  2. Filtering different columns in a material table
  3. Confirm password validation in Angular 6 [duplicate]
  4. Angular + Material – How to refresh a data source (mat-table)
  5. Apply a directive conditionally
  6. mat-form-field must contain a MatFormFieldControl
  7. How to import Angular Material in project?
  8. Expandable table rows in angular 4 with angular material
  9. How can i make a MatDialog draggable / Angular Material
  10. Set default option in mat-select
  11. Array of formGroup within mat-table for each row
  12. To enable or disable the input field based on the value of select component in angular
  13. How can I use custom theme palettes in Angular?
  14. Angular 6 MatTable Performance in 1000 rows
  15. Filtering specific column in Angular Material table in angular 5 [duplicate]
  16. How to pass data to dialog of angular material 2
  17. custom filter in mat-table
  18. Mat-table Sorting Demo not Working
  19. how to support same column size when screen size reducing in angular material table
  20. @angular/material/index.d.ts’ is not a module
  21. Default sorting in Angular Material – Sort header
  22. How to use MatPaginatorIntl?
  23. SassError: Can’t find stylesheet to import. @use ‘~@angular/material’ as mat;
  24. Open/Close sidenav from another component
  25. Angular Mat Select Multiple selectionchange finding which option was changed
  26. How to manually set focus on mat-form-field in Angular 6
  27. How to dynamically add FormControl to FormArray on button click in Angular?
  28. Angular 9 Formarray search operation executing for only first dynamic control
  29. How can I catch the Material Datepicker month pagination event?
  30. Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)

Leave a Comment