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

    Additional Resources

    Our community is active and always welcoming to new ideas.