New to Kendo UI for Angular? Start a free 30-day trial

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-JSON data that is different from the default en-US option.

Loading Pre-Built Data

This package provides pre-built locales which are generated from the Unicode® CLDR and simplify the loading of the requested data.

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

To load a pre-built locale, import its module(s) in the app.module.ts file using the following template.

import { LOCALE_ID, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { IntlModule } from "@progress/kendo-angular-intl";

import '@progress/kendo-angular-intl/locales/{locale-name}/{locale-part}';

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

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IntlModule,
  ],
  providers: [
    {
        provide: LOCALE_ID,
        useValue: "{locale-name}-{culture}",
    },
  ],
})
export class AppModule {}

In case you are using standalone components, import the locale in the app.config.ts file.

import { ApplicationConfig, LOCALE_ID, importProvidersFrom } from '@angular/core';
...

import "@progress/kendo-angular-intl/{locale-name}/{locale-part}";

export const appConfig: ApplicationConfig = {
    providers: [..., { provide: LOCALE_ID, useValue: "{locale-name}-{culture}" }],
};

The locale-name from the previous examples can be any available locale, for example, bg, de, or fr.

The locale-part indicates which part of the locale will be loaded and can be any of the following:

all
calendar
currencies
numbers

The following example demonstrates how to load pre-built locales.

Change Theme

Theme

Loading ...

Loading CLDR-JSON Data

The cldr-json project 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-json packages is more demanding because it requires you to load the data from JSON files.

To use the CLDR-JSON data in Angular CLI-based projects:

Install the following subset of CLDR-JSON packages

npm install --save cldr-core cldr-dates-full cldr-numbers-full

To enable the import from the .json files, add the following settings to the tsconfig.json file:

json

{
"compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    ...
},
...
}

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.

    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-core/supplemental/likelySubtags.json';
    import currencyData from 'cldr-core/supplemental/currencyData.json';
    import weekData from 'cldr-core/supplemental/weekData.json';
    import bgNumbers from 'cldr-numbers-full/main/bg/numbers.json';
    import bgCurrency from 'cldr-numbers-full/main/bg/currencies.json';
    import bgCalendar from 'cldr-dates-full/main/bg/ca-gregorian.json';
    import bgDateFields from 'cldr-dates-full/main/bg/dateFields.json';
    import deNumbers from 'cldr-numbers-full/main/de/numbers.json';
    import deCurrency from 'cldr-numbers-full/main/de/currencies.json';
    import deCalendar from 'cldr-dates-full/main/de/ca-gregorian.json';
    import deDateFields from 'cldr-dates-full/main/de/dateFields.json';

    load(
        likelySubtags,
        weekData,
        currencyData,
        bgNumbers,
        bgCurrency,
        bgCalendar,
        bgDateFields,
        deNumbers,
        deCurrency,
        deCalendar,
        deDateFields
    );

    @NgModule({
        imports:      [ BrowserModule, IntlModule ],
        providers:    [
            { provide: LOCALE_ID, useValue: 'de-DE' }
        ],
        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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...