Right-To-Left support in Syncfusion Angular Components

17 May 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

Utilizing the RTL support provided by Syncfusion Angular components allows effective service for users of right-to-left languages. Whether implemented globally or tailored to specific components, Syncfusion offers the versatility needed to enhance the user experience across diverse linguistic audiences.