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 such as Arabic, Hebrew, Chinese, and Japanese.

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 2 application, provide a text direction value by using the kendo-direction key 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 { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    styles: [`
        .weather {
            margin: 30px;
        }
    `],
    template: `
      <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
          <template kendoTabContent>
            <div class="weather">
              <h4>17<span>&ordm;C</span></h4>
              <p>Rainy weather in Paris.</p>
            </div>
          </template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'New York'">
          <template kendoTabContent>
            <div class="weather">
              <h4>29<span>&ordm;C</span></h4>
              <p>Sunny weather in New York.</p>
            </div>
          </template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'London'">
          <template kendoTabContent>
            <div class="weather">
              <h4>21<span>&ordm;C</span></h4>
              <p>Sunny weather in London.</p>
            </div>
          </template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Moscow'">
          <template kendoTabContent>
            <div class="weather">
              <h4>16<span>&ordm;C</span></h4>
              <p>Cloudy weather in Moscow.</p>
            </div>
          </template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `
})

export class AppComponent { }
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, LayoutModule],
    providers:    [{ provide: 'kendo-direction', useValue: 'rtl' }]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

In this article