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',
    styles: ['.example-wrapper,.example-col{ vertical-align: top; }'],
    template: `
        <div class="example-wrapper">
            <div class="example-col">
              <button kendoButton (click)="onButtonClick()">Default</button>
              <button kendoButton (click)="onButtonClick()" [primary]="true">Primary</button>
              <button kendoButton (click)="onButtonClick()" [disabled]="true">Disabled</button>
            <div class="example-col">
                <button kendoButton [togglable]="true">
                  Option A
                <button kendoButton [togglable]="true">
                  Option B
                <button kendoButton [togglable]="true">
                  Option C
            <div class="example-col">
                    User Settings
            <div class="example-col">

export class AppComponent {
    imageUrl = '';

    splitButtonItems: Array<any> = [{
        text: 'Keep Text Only',
        icon: 'paste-plain-text',
        click: () => { console.log('Keep Text Only click handler'); }
    }, {
        text: 'Paste as HTML',
        icon: 'paste-as-html'
    }, {
        text: 'Paste Markdown',
        icon: 'paste-markdown'
    }, {
        text: 'Set Default Paste'

    dropDownButtonItems: Array<any> = [{
        text: 'My Profile'
    }, {
        text: 'Friend Requests'
    }, {
        text: 'Account Settings'
    }, {
        text: 'Support'
    }, {
        text: 'Log Out'

    public onSplitButtonClick(dataItem: any): void {

    public onSplitButtonItemClick(dataItem: any): void {
        if (dataItem) {

    onButtonClick() {
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { RTL } from '@progress/kendo-angular-l10n';
import { AppComponent } from './app.component';

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

const platform = platformBrowserDynamic();
In this article