RTL

A token that specifies the text direction of Kendo UI for Angular components.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { RTL } from '@progress/kendo-angular-l10n';


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

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, LayoutModule ],

  // Enable Right-to-Left mode for Kendo UI components
  providers:    [{ provide: RTL, useValue: true }],

  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

@Component({
  selector: 'my-app',
  template: `
      <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
          <ng-template kendoTabContent>
            <p>
            Paris is the capital and most populous city of France.
            </p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'New York City'">
          <ng-template kendoTabContent>
            <p>
              The City of New York, often called New York City or simply New York, is the most populous city in the United States.
            </p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tallinn'">
          <ng-template kendoTabContent>
            <p>
              Tallinn is the capital and largest city of Estonia.
            </p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Sydney'" [disabled]="true"></kendo-tabstrip-tab>
      </kendo-tabstrip>
    `
})
export class AppComponent {}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

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