All Components

Internationalization Overview

The Kendo UI Internationalization package provides services for parsing and formatting of dates and numbers.

Internationalization by Components

Currently, the following components support internationalization:

Overview

The package exports two services:

  • IntlService—An abstract IntlService class that defines the service interface of Kendo UI. No TypeScript interface is used because the Angular DI requires a concrete type.
  • CldrIntlService—The default implementation based on Kendo UI Internationalization (@telerik/kendo-intl).

To use locale data, load it from the cldr-data package.

For more information on the date and number formats Kendo UI for Angular supports, refer to the kendo-intl GitHub repository.

Default Locale Data

The default CldrIntlService service implementation supports basic operations in the en-US locale. The Kendo UI components inject it as a default provider for IntlService in their respective NgModule.

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

Scenarios

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

Load Locale Data

If your application is a locale different from en-US or you need the full locale information. This data is available in the cldr-data package.

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

SystemJS-Integrated Applications

  1. Install the systemjs-plugin-json package.

    npm install --save systemjs-plugin-json

  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 projects, refer to the following GitHub repositories:

Use Custom Service

To override the default implementation of the i18n service:

  1. Inherit IntlService or CldrIntlService and implement or override its members.

  2. Register your service as a provider of IntlService in your module.

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

import 'hammerjs';

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

import { AppComponent }   from './app.component';
import { MyIntlService } from './intl.service';

@NgModule({
  imports:      [ BrowserModule ],
  providers:    [
    { provide: IntlService, useClass: MyIntlService }
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
import { Inject, Injectable, LOCALE_ID } from '@angular/core';
import { CldrIntlService } from '@progress/kendo-angular-intl';

@Injectable()
export class MyIntlService extends CldrIntlService {
    constructor(@Inject(LOCALE_ID) localeId: string) {
        super(localeId);
    }

    public formatNumber(value: number, format: string): string {
        return `{MyIntl: ${super.formatNumber(...arguments)}}`;
    }
}
import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
        '{{value}}' as currency: {{ intl.formatNumber(value, "c") }}
        <br />
        '{{value}}' as percentage: {{ intl.formatNumber(value, "p") }}
    `
})

export class AppComponent {
    public value: number = 42;
    constructor(public intl: IntlService) {}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

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

Use the Service in Components

It is possible to use the service in your own components as well:

  1. Add CldrIntlService as a provider to your module or import the IntlModule.

  2. Inject it in your component.

  3. (Optional) Load CLDR data for the desired locales. By default, only en-US works.

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

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

import { load, IntlService, CldrIntlService } 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 ],
  providers:    [
    //{ provide: LOCALE_ID, useValue: 'bg-BG' }, //(Optional): use bg-BG culture
    { provide: IntlService, useClass: CldrIntlService }
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

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

@Component({
    selector: 'my-app',
    template: `
        '{{value}}' as currency: {{ intl.formatNumber(value, "c") }}
        <br />
        '{{value}}' as percentage: {{ intl.formatNumber(value, "p") }}
    `
})

export class AppComponent {
    public value: number = 42;
    constructor(public intl: IntlService) {}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

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

Use the Pipes in Components

To streamline display-value transformations inside the templates, use the two pipes that are available:

  1. Import IntlModule in your module. As a result, the default CldrIntlService is added as a provider and the kendoNumber and kendoDate pipes are made available.

  2. (Optional) Load CLDR data for the desired locales. By default, only en-US works.

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

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

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

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

export class AppModule { }
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <h3>Numbers</h3>
        <ul>
          <li>{{decimal | kendoNumber:'c' }}</li>
          <li>{{stringNumber | kendoNumber:'p' }}</li>
          <li>{{int | kendoNumber:'##.00' }}</li>
        </ul>
        <h3>Dates</h3>
        <ul>
          <li>{{date | kendoDate }}</li>
          <li>{{milliseconds | kendoDate: 'M/dd/yyy' }}</li>
          <li>{{stringDate | kendoDate: 'G' }}</li>
        </ul>
      `
})
export class AppComponent {
    protected decimal: number = 42.123;
    protected int: number = 42;
    protected stringNumber: string = '42.123';

    protected date: Date = new Date();
    protected milliseconds: number = this.date.getTime();
    protected stringDate: string = '01/02/2011';
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article