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.


In web applications, the RTL mode can be enabled with the dir attribute of a DOM element.

The Kendo UI Gauges package for Angular delivers RTL support for the Linear Gauge component. To enable the RTL mode of the Linear Gauge, 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';

import { saveAs } from '@progress/kendo-file-saver';

    selector: 'my-app',
    template: `
        <kendo-lineargauge [pointer]="{ value: value }" [scale]="{ vertical: false, labels: { format: 'c' } }">
    styles: [`
        .k-gauge {
            display: block;
            width: 300px;
            margin: 0 auto;
export class AppComponent {
  public value = 30;

import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GaugesModule } from '@progress/kendo-angular-gauges';
import { IntlModule } from '@progress/kendo-angular-intl';
import { RTL } from '@progress/kendo-angular-l10n';

// Load all required data for the he locale
import '@progress/kendo-angular-intl/locales/he/all';

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

  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [

    // Import the internationalization module
  providers:    [{
    // Set default locale to he-IL
    provide: LOCALE_ID, useValue: 'he-IL'
  }, {
    // Set the text direction to Right-to-Left
    provide: RTL, useValue: true

export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { GaugesModule } from '@progress/kendo-angular-gauges';
import { AppModule } from './app.module';


const platform = platformBrowserDynamic();

In this article