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