All Components

Components / Globalization / Internationalization

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:

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.

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { IntlModule } from '@progress/kendo-angular-intl';

// Load all required data for the bg locale
import '@progress/kendo-angular-intl/locales/bg/all';

// Load the required calendar data for the de locale
import '@progress/kendo-angular-intl/locales/de/calendar';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [
    BrowserModule,

    // Import the internationalization module
    IntlModule
  ],
  providers:    [{
    // Set default locale to bg-BG
    provide: LOCALE_ID, useValue: 'bg-BG'
  }]
})
export class AppModule { }


import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
      <p>
        Date: <strong>{{date}}</strong>
      </p>
      <p>
        Formatted using the default "bg" locale:
        <strong>
          {{ intl.formatDate(date, { skeleton: 'yMMMd' }) }}
        </strong>
      </p>
      <p>
        Formatted using the "de" locale:
        <strong>
          {{ intl.formatDate(date, { skeleton: 'yMMMd' }, "de") }}
        </strong>
      </p>
    `
})

export class AppComponent {
  public date: Date = new Date();

  constructor(public intl: IntlService) {}
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

npm install --save cldr-data

The Internationalization package provides options for loading locale data to:

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:

    declare 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.

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 * as likelySubtags from 'cldr-data/supplemental/likelySubtags.json';
   import * as weekData from 'cldr-data/supplemental/weekData.json';
   import * as currencyData from 'cldr-data/supplemental/currencyData.json';
   import * as numbers from 'cldr-data/main/de/numbers.json';
   import * as timeZoneNames from 'cldr-data/main/de/timeZoneNames.json';
   import * as calendar from 'cldr-data/main/de/ca-gregorian.json';
   import * as currencies from 'cldr-data/main/de/currencies.json';
   import * as 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 { }

For the complete project which is based on the Angular CLI, refer to the kendo-angular-quickstart-cli GitHub repository.

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.

    // 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.

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 { }

For the complete project which uses SystemJS, refer to the kendo-angular-quickstart GitHub repository.

In this article