All Components

Localization Overview

The Localization package enables you to translate the components into different languages.

Together with the Internationalization package, the Localization package provides the globalization features of Kendo UI for Angular. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

To adapt a component to a different locale, you can translate its messages and enable its right-to-left support.

Messages Translation

As part of the @progress/kendo-angular-messages package, Kendo UI for Angular ships ready-to-use translations for common locales. These translations are used to populate Angular Internationalization (i18n) message files. The package with the available translations is hosted on GitHub and is open for contributions. For more information on how to obtain localized messages, refer to the article on translating the messages of the components.

RTL Support

Right-to-Left (RTL) support represents the ability of a library, website, or application to handle and respond to users who communicate through right-to-left languages. Right-to-left languages are Arabic, Hebrew, Chinese, Japanese, and others.

In web applications, the RTL mode can be enabled with the dir attribute of a DOM element. To enable the RTL mode for all Kendo UI components in your Angular application, provide a text direction value by using the RTL token in the root module of the application. You can also limit the RTL mode to a part of the application by providing the value to a sub-module. By default, the RTL mode is disabled.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { RTL } from '@progress/kendo-angular-l10n';

import 'hammerjs';

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

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, LayoutModule ],

  // Enable Right-to-Left mode for Kendo UI components
  providers:    [{ provide: RTL, useValue: true }],

  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
          <ng-template kendoTabContent>
            <p>
            Paris is the capital and most populous city of France.
            </p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'New York City'">
          <ng-template kendoTabContent>
            <p>
              The City of New York, often called New York City or simply New York, is the most populous city in the United States.
            </p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tallinn'">
          <ng-template kendoTabContent>
            <p>
              Tallinn is the capital and largest city of Estonia.
            </p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Sydney'" [disabled]="true"></kendo-tabstrip-tab>
      </kendo-tabstrip>
    `
})
export class AppComponent {}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

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

Dynamic Update of Text Direction

In specific scenarios—for example, if the language of your application changes dynamically—you can change the text direction at runtime. The dynamic update of the text direction is handled through the Message Service because the text direction typically changes with the messages. For more information, refer to the section on updating messages dynamically.

If the translation of messages is handled elsewhere and you only want to change the text direction, call notify on the default MessageService.

import { Component } from '@angular/core';
import { MessageService } from '@progress/kendo-angular-l10n';

@Component({
  providers: [ MessageService ],
  selector: 'my-app',
  template: `
      <button (click)="changeDir()">Change text direction</button>

      <kendo-grid [data]="[]">
      </kendo-grid>
    `
})
export class AppComponent {
  private rtl = false;

  constructor (private messages: MessageService) {}

  public changeDir() {
    this.rtl = !this.rtl;
    this.messages.notify(this.rtl);
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { GridModule } from '@progress/kendo-angular-grid';

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

@NgModule({
  imports:      [ BrowserModule, HttpModule, GridModule ],
  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);
In this article