Right-To-Left support in Syncfusion Angular Components
30 Apr 20245 minutes to read
Right-to-Left (RTL) support allows applications to effectively communicate with users who use languages that are written from right to left, such as Arabic, Hebrew, etc.
Syncfusion Angular UI components support for right-to-left (RTL) by setting the enableRtl
property to true
. This adds the class name e-rtl
to the component element and renders all Syncfusion Angular components in a right-to-left direction.
Enable RTL for all components
To enable Right-To-Left (RTL) support for all components, users can set the enableRtl
property directly in their application. 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 { 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));