All Components

Internationalization Overview

The Kendo UI Internationalization package (@progress/kendo-angular-intl) provides services for parsing and formatting of dates and numbers.

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

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 on this, refer to the following example.

Scenarios

Load Locale Data

If your application is a locale different from en-US or you need the full locale information:

  1. Install the cldr-data package.

    npm install --save cldr-data

  2. (For Webpack) Configure json-loader. For more information on how to do this, refer to the article on Webpack loaders or the documentation of the module loader of your choice.

    npm install --save json-loader

  3. Load the desired locales.

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

import { load } from '@telerik/kendo-intl';
load(
  require(`json!cldr-data/main/bg/numbers.json`),
  require(`json!cldr-data/main/bg/currencies.json`),
  require(`json!cldr-data/main/bg/ca-gregorian.json`),
  require(`json!cldr-data/main/bg/timeZoneNames.json`)
);

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule],
    providers:    [{ provide: LOCALE_ID, useValue: 'bg-BG' }]
})
export class AppModule {
}

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 { IntlService } from '@progress/kendo-angular-intl';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule],
    providers:    [{
      provide: IntlService,
      useClass: MyIntlService
    }]
})
export class 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.
  2. Inject it in your component.
  3. (Optional) Load CLDR data for the desired locales. By default, only en-US works.
import { CldrIntlService } from '@progress/kendo-angular-intl';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule],
    providers:    [{
      provide: IntlService,
      useClass: CldrIntlService
    }]
})
export class AppModule {
}
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
  selector: 'my-app',
  template: `
    {{ intl.formatNumber(42, "c") }}
  `
})
export class AppComponent {
  constructor(public intl: IntlService) {
  }
}

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 { IntlModule } from '@progress/kendo-angular-intl';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, IntlModule],
})
export class AppModule {
}
@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';
}
In this article