All Components

Localization Overview

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

For more information on the localization approaches provided by the components, refer to the article on localization support.

Translation of Messages and RTL Support

To adapt a component to a different locale:

Messages

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 { HttpModule } from '@angular/http';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { RTL } from '@progress/kendo-angular-l10n';

import 'hammerjs';

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

@NgModule({
  imports:      [ BrowserModule, HttpModule, 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">
          <template kendoTabContent>
            <p>
            Paris is the capital and most populous city of France.
            </p>
          </template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'New York City'">
          <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>
          </template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tallinn'">
          <template kendoTabContent>
            <p>
              Tallinn is the capital and largest city of Estonia.
            </p>
          </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);
In this article