Localization

    With only a few lines of code, users can easily localize the strings in Ignite UI for Angular components.

    Usage

    Localize entire application

    To get all 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, which 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

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;

    Load localized resources from npm package

    Firstly the package that contains the resource strings should be installed:

    npm install igniteui-angular-i18n --save-dev

    Then in order to use Japanese, Korean and Spanish resource strings, the following imports should be added to the application and the changei18n functions should be called:

    // app.component.ts

import { IgxResourceStringsJA } from 'igniteui-angular-i18n';
import { IgxResourceStringsKO } from 'igniteui-angular-i18n';
import { IgxResourceStringsES } from 'igniteui-angular-i18n';
...

public ngOnInit(): void {
    ...
    changei18n(IgxResourceStringsKO);
    ...
}

    Additional Resources

    Our community is active and always welcoming to new ideas.