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:

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.

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:

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

Angular CLI-Based Applications

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;
}
```
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.
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.

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

Install the systemjs-plugin-json package by running the npm install --save systemjs-plugin-json command.
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.
Provide the locale ID by using the LOCALE_ID provider.

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. For the complete project which uses SystemJS, refer to the kendo-angular-quickstart GitHub repository.

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:

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

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

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

// Load the default locale initially
import '@progress/kendo-angular-intl/locales/en/all';

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

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [
    BrowserModule,
    IntlModule,
    HttpClientModule
  ],
  providers:    [{
    // Set the default locale to en
    provide: LOCALE_ID, useValue: 'en'
  }]
})
export class AppModule { }

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

@Component({
    providers: [LocaleService],
    selector: 'my-app',
    template: `
        <div class="example-config">
            <label>
                Locale
                <select [value]="localeId" (change)="onLocaleChange($event.target.value)">
                    <option value="en">en-US</option>
                    <option value="bg">bg-BG</option>
                    <option value="de">de-DE</option>
                </select>
            </label>
        </div>
        <h3>Numbers</h3>
        <ul>
          <li>{{ number | kendoNumber:'c':localeId }}</li>
          <li>{{ intlService.formatNumber(number, 'c') }}</li>
        </ul>
        <h3>Dates</h3>
        <ul>
          <li>{{date | kendoDate:'d':localeId }}</li>
          <li>{{ intlService.formatDate(date, 'd') }}</li>
        </ul>
      `
})
export class AppComponent {
    public number = 42.123;
    public date = new Date();

    constructor(public intlService: IntlService, private localeService: LocaleService, ) {
    }

    public get localeId(): string {
        return this.localeService.localeId;
    }

    public onLocaleChange(locale: string): void {
        this.localeService.set(locale);
    }
}

import { Injectable, Inject, LOCALE_ID } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IntlService, CldrIntlService, setData } from '@progress/kendo-angular-intl';

@Injectable()
export class LocaleService {
    private url = 'https://unpkg.com/@progress/kendo-angular-intl@dev/locales/json/{0}/all.json';
    private loaded: any = {};

    constructor(private http: HttpClient,
                private intl: IntlService,
                @Inject(LOCALE_ID) public localeId: string) {

        this.loaded[localeId] = true;
    }

    public set(localeId: string): void {
        if (this.loaded[localeId]) {
            this.setLocale(localeId);

            return;
        }

        this.http.get(this.intl.format(this.url, localeId))
            .subscribe(result => {
                // set the recieved locale data
                setData(result);

                this.loaded[localeId] = true;

                // set the local as current
                this.setLocale(localeId);
            });
    }

    private setLocale(localeId: string): void {
        (this.intl as CldrIntlService).localeId = localeId;
        this.localeId = localeId;
    }
}

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

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

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

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.

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

import { IntlModule, localeData, Locale } 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';


const bgData = localeData('bg');
const deData = localeData('de');

bgData.calendar.patterns.d = 'dd-MMM-yyyy';
deData.calendar.patterns.t = 'HH:mm a';

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

    // Import the internationalization module
    IntlModule
  ],
  providers:    [{
    // Set the 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, 'd') }}
        </strong>
      </p>
      <p>
        Formatted using the "de" locale:
        <strong>
          {{ intl.formatDate(date, 't', "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 Data

Default Locale Data

Additional Locale Data

Loading Pre-Built Data

Loading CLDR Data

Angular CLI-Based Applications

SystemJS-Integrated Applications

Loading Locale Data on Demand

Modifying the Locale Data

Suggested Links

Was this article helpful?

Give article feedback

Kendo UI for Angular

Community

Web App Development

Complete .net Toolbox