Loading Data

The Internationalization package enables you to load default and additional locale data.

Default Locale Data

The default CldrIntlService service implementation supports basic operations in the en-US locale. A Kendo UI component injects it in its NgModule as a default provider for the IntlService.

Some operations, such as the parsing and formatting of currencies other than USD, require you to load the full locale information. For more information, refer to the following section on loading additional locale data.

Additional Locale Data

When you parse and format dates and numbers, you can:

• Load pre-built data
• Load CLDR data that is different from the default en-US option.
  • In Angular CLI-based applications
  • In SystemJS-integrated applications

Loading Pre-Built Data

This package provides pre-built locales which are generated from the cldr-data package and simplify the loading of the requested data. To load a pre-built locale, import the @progress/kendo-angular-intl/locales/LOCALE_NAME/all file. Depending on the parsing and formatting options your project requires, you can also import the separate "numbers", "currencies", and "calendar" files.

The pre-built locale data in the kendo-angular-intl package might be outdated with respect to the cldr-data package.

Loading CLDR Data

The cldr-data package is the reference source of data for all locales. Compared to the usage of the pre-built locales in your project, the usage of the cldr-data package is more demanding because it requires you to load the data from JSON files.

Copy Codenpm install --save cldr-data

The Internationalization package provides options for loading locale data to:

• Applications that are created with Angular CLI.
• Applications that use the SystemJS module loader.

Angular CLI-Based Applications

1. To enable the import from the .json files, add the code from the following example to the src/typings.d.ts file:

   Copy Codedeclare module "*.json" {
       const value: any;
       export default value;
   }

2. Load the desired locales and the supplemental data. For more information on which files are required for specific features, refer to the documentation on the Kendo UI Internationalization package.

3. Provide the id of the locale by using the LOCALE_ID provider.

The following example demonstrates the sample configuration for loading locale data in applications that are created with Angular CLI. For the complete project which is based on the Angular CLI, refer to the kendo-angular-quickstart-cli GitHub repository.

Copy Code    import { LOCALE_ID, NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent } from './app.component';
    import { load, IntlModule } from '@progress/kendo-angular-intl';
    import likelySubtags from 'cldr-data/supplemental/likelySubtags.json';
    import weekData from 'cldr-data/supplemental/weekData.json';
    import currencyData from 'cldr-data/supplemental/currencyData.json';
    import numbers from 'cldr-data/main/de/numbers.json';
    import timeZoneNames from 'cldr-data/main/de/timeZoneNames.json';
    import calendar from 'cldr-data/main/de/ca-gregorian.json';
    import currencies from 'cldr-data/main/de/currencies.json';
    import dateFields from 'cldr-data/main/de/dateFields.json';

    load(
        likelySubtags,
        weekData,
        currencyData,
        numbers,
        currencies,
        calendar,
        dateFields,
        timeZoneNames
    );

    @NgModule({
        imports:      [ BrowserModule, IntlModule ],
        providers:    [
            { provide: LOCALE_ID, useValue: 'de-DE' }
        ],
        declarations: [ AppComponent ],
        bootstrap: [ AppComponent ]
    })

    export class AppModule { }

SystemJS-Integrated Applications

1. Install the systemjs-plugin-json package by running the npm install --save systemjs-plugin-json command.

2. Load the desired locales and the supplemental data. For more information on which files are required for specific features, refer to the documentation on the Kendo UI Internationalization package.

3. Provide the locale ID by using the LOCALE_ID provider.

4. Provide the necessary settings in the systemjs.config.js file.

   Copy Code// other libraries
   'cldr-data': 'npm:cldr-data',
   'rxjs': 'npm:rxjs',
   'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
   'jszip': 'npm:jszip',
   'systemjs-plugin-json': 'npm:systemjs-plugin-json',
   ...
   meta: {
     '*.json': {
       loader: 'systemjs-plugin-json'
     }
   },
   ...
   'systemjs-plugin-json': {
         defaultExtension: 'js',
         main: 'json.js'
   }

The following example demonstrates the sample configuration for loading locale data in applications that use the SystemJS module loader. For the complete project which uses SystemJS, refer to the kendo-angular-quickstart GitHub repository.

Copy Code    import { LOCALE_ID, NgModule }  from '@angular/core';
    import { BrowserModule }        from '@angular/platform-browser';
    import { ButtonsModule }        from '@progress/kendo-angular-buttons';
    import { AppComponent }         from './app.component';

    /* Loading CLDR data */
    import { load } from '@progress/kendo-angular-intl';
    load(
        require("cldr-data/supplemental/likelySubtags.json"),
        require("cldr-data/supplemental/currencyData.json"),
        require("cldr-data/supplemental/weekData.json"),
        require("cldr-data/main/bg/numbers.json"),
        require("cldr-data/main/bg/currencies.json"),
        require("cldr-data/main/bg/dateFields.json"),
        require("cldr-data/main/bg/ca-gregorian.json"),
        require("cldr-data/main/bg/timeZoneNames.json")
    );

    @NgModule({
        imports: [ BrowserModule, ButtonsModule ],
        declarations: [ AppComponent ],
        bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

Loading Locale Data on Demand

If your project has to support too many locales to be loaded initially:

1. Load the predefined JSON data on demand through AJAX.
2. Set the data by using the setData function.

Modifying the Locale Data

To change the default formats of a locale, get the data for a locale by using the localeData method, and modify it.

Suggested Links

• GitHub Project Created with Angular CLI
• GitHub Project Using SystemJS
• IntlService API Reference
• CldrIntlService API Reference
• Troubleshooting