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">
        <button kendoButton *ngIf="!opened" (click)="open()">Open dialog</button>
        <kendo-dialog title="Please confirm" *ngIf="opened" (close)="close('cancel')" [minWidth]="250" [width]="450">
            <p style="margin: 30px; text-align: center;">Are you sure you want to continue?</p>
                <button kendoButton (click)="close('no')">No</button>
                <button kendoButton (click)="close('yes')" primary="true">Yes</button>
export class AppComponent {
    public opened: bool = true;

    public close(status) {
      console.log(`Dialog result: ${status}`);
      this.opened = false;

    public open() {
      this.opened = true;
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RTL } from '@progress/kendo-angular-l10n';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DialogModule } from '@progress/kendo-angular-dialog';

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

  bootstrap:    [AppComponent],
  declarations: [AppComponent],
  imports:      [BrowserModule, BrowserAnimationsModule, ButtonsModule, DialogModule],
  providers:    [{ provide: RTL, useValue: true }]
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';


const platform = platformBrowserDynamic();
In this article