Right-To-Left support in Syncfusion® Angular Components

5 Apr 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.