Localization (i18n)
Currently, Ignite UI for Angular ships with resource strings for the following languages and scripts: Bulgarian, Czech, Danish, Dutch, 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.
With only a few lines of code, users can easily localize the 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 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 call the changei18n()
function passing the corresponding resource object:
// app.component.ts
...
import { changei18n } from "igniteui-angular";
import { IgxResourceStringsJA } from 'igniteui-angular-i18n';
...
public ngOnInit(): void {
...
changei18n(IgxResourceStringsJA);
...
}
Note: Feel free to contribute to the
igniteui-angular-i18n
package.
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 on an app.module level. The localization can be done anywhere in the app, not only in the app.module.ts
// app.component.ts
...
import { changei18n } from "igniteui-angular";
...
public partialCustomHindi: IResourceStrings;
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: 'औसत'
...
};
changei18n(this.partialCustomHindi);
...
}
Alternatively, you may get all currently available resource strings. There is a global function getCurrentResourceStrings
, which returns an IResourceStrings
object.
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 { changei18n } from "igniteui-angular";
...
public ngOnInit(): void {
...
const currentRS = getCurrentResourceStrings();
for (const key of Object.keys(currentRS)) {
currentRS[key] = '[Localized]'+ currentRS[key];
}
changei18n(currentRS);
...
}
Localize specific strings for all components
Another approach is to localize/change only some of the strings for all components of given type. There is a resourceStrings
property for the components that could be localized, which is of IResourceStrings
type.
const currentRS = this.grid.resourceStrings;
currentRS.igx_grid_filter = '[Localized]Filter';
currentRS.igx_grid_filter_row_close = '[Localized]Close';
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.