HelpBot Assistant

How can I help you?

Right-to-Left (RTL) Support in Syncfusion® Angular Components

2 Feb 20266 minutes to read

Right-to-Left (RTL) support enables applications to correctly display content for languages written from right to left, such as Arabic, Hebrew, Persian, and Urdu. When RTL is enabled, Syncfusion® Angular components automatically adjust text direction, alignment, icons, scrollbars, popups, and layout mirroring to provide a natural reading and interaction experience.

Syncfusion® Angular UI components include built-in RTL support. Setting the enableRtl property to true applies the e-rtl class to the component’s root element, triggering layout mirroring and direction changes.

Ensure the following imports are present in your component or module:

import { enableRtl } from '@syncfusion/ej2-base';

Enable RTL Configuration

To apply RTL consistently across all Syncfusion® components, enable it at the application level before any component initialization. The most reliable method is to call enableRtl(true) early in the application lifecycle

Example enabling RTL globally:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'



import { enableRtl } from '@syncfusion/ej2-base';
import { Component} from '@angular/core';
// Enables Right to left alignment for all controls
enableRtl(true);

@Component({
imports: [
        
        ListViewModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-listview id='sample-list' [dataSource]='data' [fields]='fields' showHeader='true' headerTitle='Social Media'>
    <ng-template #template let-data="">
    <span class=' icon'><span class='media'></span></span>
    </ng-template></ejs-listview>`
})

export class AppComponent {
    public data: Object = [
    { class: 'facebook', socialMedia: 'Facebook', id: 'media1' },
    { class: 'twitter', socialMedia: 'Twitter', id: 'media2' },
    { class: 'tumblr', socialMedia: 'Tumblr', id: 'media4' },
    { class: 'google-plus', socialMedia: 'Google Plus', id: 'media5' },
    { class: 'skype', socialMedia: 'Skype', id: 'media6' },
    { class: 'vimeo', socialMedia: 'Vimeo', id: 'media7' },
    { class: 'instagram', socialMedia: 'Instagram', id: 'media8' },
    { class: 'youtube', socialMedia: 'YouTube', id: 'media9' },
    ];

    public fields: Object = { text: 'socialMedia' };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable RTL for an individual component

For scenarios requiring mixed LTR and RTL layouts (e.g., specific sections in RTL while the rest remains LTR), set the enableRtl property directly on individual components.

Example enabling RTL on a single component:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'




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

@Component({
imports: [
        
        ListViewModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<ejs-listview id='sample-list' [dataSource]='data' [fields]='fields' showHeader='true'
    enableRtl='true' headerTitle='Social Media'>
    <ng-template #template let-data="">
    <span class=' icon'><span class='media'></span></span>
    </ng-template></ejs-listview> `
})

export class AppComponent {
    public data: Object = [
    { class: 'facebook', socialMedia: 'Facebook', id: 'media1' },
    { class: 'twitter', socialMedia: 'Twitter', id: 'media2' },
    { class: 'tumblr', socialMedia: 'Tumblr', id: 'media4' },
    { class: 'google-plus', socialMedia: 'Google Plus', id: 'media5' },
    { class: 'skype', socialMedia: 'Skype', id: 'media6' },
    { class: 'vimeo', socialMedia: 'Vimeo', id: 'media7' },
    { class: 'instagram', socialMedia: 'Instagram', id: 'media8' },
    { class: 'youtube', socialMedia: 'YouTube', id: 'media9' },
    ];

    public fields: Object = { text: 'socialMedia' };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

RTL with Localization

RTL is most effective when combined with appropriate culture/locale settings. Load the desired locale and set it alongside RTL:

import { L10n, setCulture } from '@syncfusion/ej2-base';

// Load locale resources (example for Arabic)
L10n.load({
  'ar': {
    // locale strings...
  }
});

setCulture('ar');
enableRtl(true);

This ensures text, date/number formatting, and layout all align with RTL language conventions.

What Changes in RTL Mode

When enableRtl is enabled, Syncfusion® components automatically:

  • Reverse text direction (direction: rtl)
  • Mirror horizontal alignments (left → right, right → left)
  • Flip icons, arrows, and expand/collapse indicators
  • Adjust popup/menu positioning and scrollbars
  • Reverse grid column order

Most Syncfusion® Angular components fully support RTL. For any exceptions or special configurations, refer to the specific component documentation.