- Enable RTL for all components
- Enable RTL for an individual component
- Summary
Contact Support
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.