All Components

Right-to-Left 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.

RTL Support by Packages

The following Kendo UI packages for Angular provide RTL support for their messages:

Configuration

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