How to set different cultures in Javascript and Angular Grid

This knowledge base explains how to set the different cultures in the Grid component. For applying internationalization and localization, you need to load the culture-related files in your application. You can get these files by running the following npm command,

After installing cldr-data, you can find cldr-data for all locale in this location(node_modules->cldr-data->main). You can refer the required culture file in your application from the below mentioned location.

You can also find localization files for all other cultures in our ej2-locale github repository.

The Internationalization library is used to globalize number, date, and time values in the Grid component. It requires the following CLDR data to be loaded using the loadCldr function. You can set the currency code as per your requirement using the setCurrencyCode method in your Grid application.

import * as cagregorian from './ca-gregorian.json';
import * as currencies from './currencies.json';
import * as numbers from './numbers.json';
import * as timeZoneNames from './timeZoneNames.json';
 
ej.base.loadCldr(cagregorian, currencies, numbers, timeZoneNames);
ej.base.setCurrencyCode('EUR'); // Change the currency code

The Localization library allows you to localize the default text content of the Grid. In the following demo, the locale text for the fr culture is loaded through the L10n.load function. The culture can be changed using the setCulture method.

import fr from './fr.json';
 
ej.base.L10n.load(fr);
ej.base.setCulture('fr'); // Change the culture

Output

You can find the samples here:

Javascript(ES5) Sample

Angular Sample

Documentation

https://ej2.syncfusion.com/documentation/grid/global-local/

https://ej2.syncfusion.com/documentation/common/localization/

https://ej2.syncfusion.com/documentation/common/internationalization/