Localization (i18n)
Currently, Ignite UI for Angular ships with resource strings for the following languages and scripts: Bulgarian, Czech, Danish, Dutch, English, French, German, Hungarian, Italian, Japanese, Korean, Norwegian, Polish, Portuguese, Romanian, Spanish, Swedish, Turkish, Traditional Chinese (zh-Hant) and Simplified Chinese (zh-Hans). These are available via the igniteui-angular-i18n
package, except for English which comes as a default localization in igniteui-angular
.
With only a few lines of code, users can easily change the localization strings in Ignite UI for Angular components.
Angular Localization Example
Note: Hindi (HI) included in the sample is only for illustrational purposes and to emphasize on the possibility to pass a custom localization object. In this sample, it contains only several localized strings for the summary. More details at Utilize own localized resources section below.
Usage
Load localized resources from npm package
You can localize an application in one of the languages available in the igniteui-angular-i18n
package like this:
Install the package by executing npm install igniteui-angular-i18n --save-dev
Import the resource strings for the desired language and either change the strings for a component instance, using the component's resourceStrings
input.
<igx-grid [data]="data" [resourceStrings]="resourcesDE" [locale]="locale">
<igx-grid-toolbar>
<igx-grid-toolbar-title>German Locale</igx-grid-toolbar-title>
</igx-grid-toolbar>
<igx-column field="ProductName" header="Product Name" [groupable]="true">
</igx-column>
<igx-column field="QuantityPerUnit" header="Quantity Per Unit" [groupable]="true">
</igx-column>
<igx-column field="UnitPrice" header="Unit Price" [sortable]="true" [hasSummary]="true"
[dataType]="'currency'" [groupable]="true">
</igx-column>
<igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [groupable]="true">
</igx-column>
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [groupable]="true">
</igx-column>
</igx-grid>
import { Component } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDE from '@angular/common/locales/de';
import { GridResourceStringsDE } from 'igniteui-angular-i18n';
@Component({
selector: 'app-locale',
styleUrls: ['./locale.component.scss'],
templateUrl: 'locale.component.html'
})
export class LocaleComponent implements OnInit {
public resourcesDE = GridResourceStringsDE;
public locale = 'DE';
public data: any[];
constructor() {
registerLocaleData(localeDE);
}
}
Alternatively, you can call the changei18n()
function passing the corresponding resource object to change the localization for all components.
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { changei18n } from "igniteui-angular";
import { IgxResourceStringsJA } from 'igniteui-angular-i18n';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
public ngOnInit(): void {
changei18n(IgxResourceStringsJA);
}
}
Note: Feel free to contribute to the
igniteui-angular-i18n
package with more languages!
Utilize own localized resources
changei18n
function expects an IResourceStrings
object. If the language you want to use is not available in the igniteui-angular-i18n
package, or simply want to change a particular string, you can pass a custom object containing your string resources for the language and components you need. This will change the global i18n for the igniteui-angular components.
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { changei18n, IGridResourceStrings } from "igniteui-angular";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
public partialCustomHindi: IGridResourceStrings;
public ngOnInit(): void {
this.partialCustomHindi = {
igx_grid_summary_count: 'गणना',
igx_grid_summary_min: 'न्यून',
igx_grid_summary_max: 'अधिक',
igx_grid_summary_sum: 'योग',
igx_grid_summary_average: 'औसत'
};
// This will change all grid application instances' strings to the newly provided ones
changei18n(this.partialCustomHindi);
}
}
Alternatively, you may get all currently available component resource strings. There is objects for each component containing localizable strings. The values could be replaced in order to be localized and then the object can be passed to the changei18n
function, as a parameter.
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { changei18n, GridResourceStringsEN, TimePickerResourceStringsEN } from "igniteui-angular";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
public ngOnInit(): void {
const currentRS = {
...GridResourceStringsEN,
...TimePickerResourceStringsEN
};
for (const key of Object.keys(currentRS)) {
currentRS[key] = '[Localized] '+ currentRS[key];
}
changei18n(currentRS);
}
}
Localize specific strings for a specific instance of a component
If only a single igx-grid
instance should be localized, there is a way. The resourceStrings
property should be used and it should be set to a new instance of IGridResourceStrings
type.
const newGridRes: IGridResourceStrings = {
igx_grid_filter: '[Localized]Filter',
igx_grid_filter_row_close: '[Localized]Close'
}
this.grid.resourceStrings = newGridRes;
Available resource strings
- IgxResourceStringsBG
- IgxResourceStringsCS
- IgxResourceStringsDA
- IgxResourceStringsDE
- IgxResourceStringsES
- IgxResourceStringsFR
- IgxResourceStringsHU
- IgxResourceStringsIT
- IgxResourceStringsJA
- IgxResourceStringsKO
- IgxResourceStringsNB
- IgxResourceStringsNL
- IgxResourceStringsPL
- IgxResourceStringsPT
- IgxResourceStringsRO
- IgxResourceStringsSV
- IgxResourceStringsTR
- IgxResourceStringsZHHANS
- IgxResourceStringsZHHANT
Additional Resources
Our community is active and always welcoming to new ideas.