Locale Changes

You can change the current locale at runtime.

Changing Locales Dynamically

To dynamically change the CldrIntlService locale, set its localeId property. The service notifies each subscribed component that changes in the service were made and requires the component to update its output accordingly. To dynamically change the locale of the date and number pipes, pass the locale as a third parameter.

import { Component, LOCALE_ID, Inject } from '@angular/core';
import { IntlService, CldrIntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <label>
                Locale
                <select [value]="localeId" (change)="onLocaleChange($event.target.value)">
                    <option value="en-US">en-US</option>
                    <option value="bg-BG">bg-BG</option>
                    <option value="de-DE">de-DE</option>
                </select>
            </label>
        </div>
        <h3>Numbers</h3>
        <ul>
          <li>{{ number | kendoNumber:'c':localeId }}</li>
          <li>{{ intlService.formatNumber(number, 'c') }}</li>
        </ul>
        <h3>Dates</h3>
        <ul>
          <li>{{date | kendoDate:'d':localeId }}</li>
          <li>{{ intlService.formatDate(date, 'd') }}</li>
        </ul>
      `
})
export class AppComponent {
    public number = 42.123;
    public date = new Date();

    constructor(@Inject(LOCALE_ID) public localeId: string, public intlService: IntlService) {
    }

    public onLocaleChange(locale: string): void {
        this.localeId = locale;
        (<CldrIntlService>this.intlService).localeId = locale;
    }
}
import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

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

import '@progress/kendo-angular-intl/locales/en/all';
import '@progress/kendo-angular-intl/locales/bg/all';
import '@progress/kendo-angular-intl/locales/de/all';

@NgModule({
  imports:      [ BrowserModule, IntlModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [{
      provide: LOCALE_ID,
      useValue: 'en-US'
  }]
})

export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

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

Using Lazy Loaded Modules

Projects with lazy loaded modules require additional setup to ensure that only one instance of the IntlService is loaded. Normally, each Kendo UI module provides its own service instance to the child module which makes locale changes across the whole application impossible.

As of version 2.0.0, the service is provided only in the root module and you are no longer required to include it in the child modules.

The following example demonstrates how to provide the CldrIntlService service in the root module and reuse it in the child modules.

import { Component, LOCALE_ID, Inject } from '@angular/core';
import { IntlService, CldrIntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <label>
                Locale
                <select [value]="localeId" (change)="onLocaleChange($event.target.value)">
                    <option value="en-US">en-US</option>
                    <option value="bg-BG">bg-BG</option>
                    <option value="de-DE">de-DE</option>
                </select>
            </label>
        </div>

        <button routerLink="/module-a">Lazy Module A</button>
        <button routerLink="/module-b">Lazy Module B</button>


        <router-outlet></router-outlet>
      `
})
export class AppComponent {
    public number = 42.123;
    public date = new Date();

    constructor(@Inject(LOCALE_ID) public localeId: string, public intlService: IntlService) {
    }

    public onLocaleChange(locale: string): void {
        this.localeId = locale;
        (<CldrIntlService>this.intlService).localeId = locale;
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, LOCALE_ID } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';

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

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

import '@progress/kendo-angular-intl/locales/en/all';
import '@progress/kendo-angular-intl/locales/bg/all';
import '@progress/kendo-angular-intl/locales/de/all';

const routes: Routes = [
  {
    path: 'module-a',
    loadChildren: './a.module#AModule'
  },
  {
    path: 'module-b',
    loadChildren: './b.module#BModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes)
  ],
  providers: [ CldrIntlService, {
      provide: IntlService,
      useExisting: CldrIntlService
  }, {
      provide: LOCALE_ID,
      useValue: 'en-US'
  }, {
    provide: APP_BASE_HREF,
    useValue: window.location.pathname
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { AComponent } from './a.component';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { IntlService, CldrIntlService } from '@progress/kendo-angular-intl';

const routes: Routes = [
  {
    path: '',
    component: AComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    InputsModule,
    DateInputsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [AComponent],
  providers: [{
      provide: IntlService,
      useExisting: CldrIntlService
  }]
})
export class AModule { }
import { Component } from '@angular/core';

@Component({
    selector: 'a-component',
    template: `
        <h3>A component</h3>
        <kendo-numerictextbox [value]="number" format="c"></kendo-numerictextbox> <br />
        <kendo-datepicker [value]="date"></kendo-datepicker>
    `
})
export class AComponent {
    public number = 42.123;
    public date = new Date();
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { BComponent } from './b.component';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { IntlService, CldrIntlService } from '@progress/kendo-angular-intl';

const routes: Routes = [
  {
    path: '',
    component: BComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    InputsModule,
    DateInputsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [BComponent],
  providers: [{
      provide: IntlService,
      useExisting: CldrIntlService
  }]
})
export class BModule { }
import { Component } from '@angular/core';

@Component({
    selector: 'b-component',
    template: `
        <h3>B component</h3>
        <kendo-numerictextbox [value]="number" format="c"></kendo-numerictextbox> <br />
        <kendo-datepicker [value]="date"></kendo-datepicker>
    `
})
export class BComponent {
    public number = 42.123;
    public date = new Date();
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

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

In this article