All Components

Services

The Internationalization (i18n) package exposes the IntlService and CldrIntlService services.

IntlService is an abstract IntlService class that defines the service interface of Kendo UI. It does not use TypeScript interface because the Angular DI requires a concrete type.

CldrIntlService is the default implementation based on Kendo UI Internationalization (@telerik/kendo-intl).

Using the Service in Components

To use the service in your own components:

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

  2. Inject it in your component.

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

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 { 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 { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

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

Customizing the Default Service

To override the default behavior 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 { 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 { LOCALE_ID, NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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 { 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);
In this article