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 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';

@Component({
    selector: 'my-app',
    template: `
    <div class="example-wrapper">
        <div class="row">
            <div class="col-xs-12 col-sm-6 example-col">
                <p>NumericTextBox</p>
                <kendo-numerictextbox
                    [(ngModel)] = "numericValue"
                ></kendo-numerictextbox>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Slider (value = {{sliderValue}})</p>
                <kendo-slider
                    [min]="min"
                    [max]="max"
                    [smallStep]="smallStep"
                    [(ngModel)] = "sliderValue"
                ></kendo-slider>
            </div>
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Switch</p>
                <kendo-switch [(ngModel)]="switchValue"></kendo-switch>
            </div>
        </div>
    </div>
    `
})

export class AppComponent {
    public sliderValue: number = 5;
    public numericValue: number = 5;
    public switchValue: boolean = false;
    public min: number = 0;
    public max: number = 10;
    public smallStep: number = 1;
}

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { RTL } from '@progress/kendo-angular-l10n';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [ AppComponent],
    declarations: [ AppComponent],
    imports:      [ BrowserModule, FormsModule, InputsModule ],
    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';

enableProdMode();

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

Known Limitations

Due to browser limitations, the MaskedTextBox does not support RTL.

In this article