All Components

Right-to-Left Support

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


In web applications, the RTL mode is enabled through 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 token to a sub-module. By default, the RTL mode is disabled.

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

  selector: 'my-app',
  template: `
    <div class="example-wrapper" style="text-align: right; min-height: 400px;">
      <div class="col-xs-12 col-sm-6 example-col">
        <kendo-autocomplete [data]="listItems" [placeholder]="'Your favorite sport'">

      <div class="col-xs-12 col-sm-6 example-col">
        <kendo-combobox [data]="listItems" [value]="'Basketball'">

      <div class="col-xs-12 col-sm-6 example-col">
        <kendo-dropdownlist [data]="listItems" [value]="'Basketball'">

      <div class="col-xs-12 col-sm-6 example-col">
        <kendo-multiselect [data]="listItems" [value]="value" [placeholder]="'Your favorite sports'"></kendo-multiselect>
export class AppComponent {
    public listItems: Array<string> = [
        'Baseball', 'Basketball', 'Cricket', 'Field Hockey',
        'Football', 'Table Tennis', 'Tennis', 'Volleyball'

    public value = ['Basketball', 'Cricket'];

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { RTL } from '@progress/kendo-angular-l10n';
import { AppComponent } from './app.component';

  imports: [
  declarations: [
  bootstrap: [
  providers: [
    { provide: RTL, useValue: true }
export class AppModule { }

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

const platform = platformBrowserDynamic();

In this article