Right-To-Left support in Syncfusion® Angular Components

19 Aug 20255 minutes to read

Right-to-Left (RTL) support allows applications to cater to languages written from right to left, such as Arabic and Hebrew. This feature enhances the accessibility and usability of web applications for a broader audience.

Syncfusion® Angular UI components provide built-in RTL support. By setting the enableRtl property to true, you can render Syncfusion® components in a right-to-left direction. This automatically applies the e-rtl class to the component’s HTML element.

Enable RTL for all components

To enable RTL support globally across all Syncfusion® Angular components, set the enableRtl property at the application level. This ensures a consistent RTL layout throughout your application. Below is an example using the ListView component:

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

To enable Right-To-Left (RTL) support for an individual component, users can set the enableRtl property in the component’s options. Here is an example code snippet using the ListView 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));

Summary

Syncfusion® Angular components provide robust Right-to-Left support that can be implemented either globally or on a per-component basis. This flexibility allows developers to create culturally appropriate interfaces for RTL language users while maintaining proper layout, alignment, and usability.

By properly implementing RTL support, you ensure that your applications are accessible and intuitive for users across diverse linguistic backgrounds, significantly enhancing the global reach and usability of your software.