Dynamic Globalization

[Louis Goh Boon Kuan]

Hi,

The code below works.  I would like the user to be able to change the language of their choice.  The loadCldr from the example is static and how do I make that selective at runtime.  Thank you.

import { EmitType } from '@syncfusion/ej2-base';

import { L10n, loadCldr } from '@syncfusion/ej2-base';

import * as L10nJson from '../../assets/l10n.json';

import { SwitchComponent } from '@syncfusion/ej2-angular-buttons';

import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

import { DatePickerComponent } from '@syncfusion/ej2-angular-calendars';

L10n.load(L10nJson.default)

loadCldr(

require('cldr-data/main/zh/numbers.json'),

require('cldr-data/main/zh/ca-gregorian.json'),

require('cldr-data/main/zh/numbers.json'),

require('cldr-data/supplemental/numberingSystems.json'),

require('cldr-data/main/zh/timeZoneNames.json')

);

[Ashokkumar Balasubramanian]

Hi Louis Goh Boon Kuan, 

 

Good day to you. 

 

You can use the Ajax and setCulture method to load the corresponding culture in dynamically. Please refer the below code block. 

 

public onChange(args: any): void { 

    if(this.loadedCultures.indexOf(args.value) === -1) { 

        this.loadedCultures.push(args.value); 

        this.loadCultureFiles(args.value); 

    } 

    setCulture(args.value); 

} 

 

//Function for loading locale files based on culture name 

loadLocaleFiles(name: string) { 

    // load local files 

    let localeajax: Ajax = new Ajax('./node_modules/@syncfusion/ej2-locale/src/' + name + '.json', 'GET', false); 

    localeajax.onSuccess = (value: string) => { 

        L10n.load(JSON.parse(value)); 

    } 

    localeajax.send(); 

} 

// Function for loading the culture files from cldr-data. 

loadCultureFiles(name: string) { 

 

    this.loadLocaleFiles(name); 

    // since default culture files are preloaded no need to load the files again. 

    if(name === 'en-US'){ 

        return; 

    } 

    let files: string[] = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json', 'numberingSystems.json']; 

 

    let loadCulture = function (prop: any) { 

        let val: string, ajax: Ajax; 

        if (prop === files.length - 1) { 

            ajax = new Ajax('./node_modules/cldr-data/supplemental/' + files[prop], 'GET', false); 

        } else { 

            ajax = new Ajax('./node_modules/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 

        } 

        ajax.onSuccess = function (value: any) { 

            val = value; 

            loadCldr(JSON.parse(val)); 

        }; 

        ajax.send(); 

 

    }; 

    for (let prop = 0; prop < files.length; prop++) { 

        loadCulture(prop); 

    } 

} 

 

For your reference, we have prepared the sample for this requirement, please find it below. 

 

http://www.syncfusion.com/downloads/support/forum/144932/ze/DynamicGlobalization-1294307575.zip 

 

Steps to run the sample: 

 

npm install 

npm start 

 

Please check the sample and get back to us, if you need any further assistance on this. 

 

Regards, 

Ashokkumar B.