HelpBot Assistant

How can I help you?

Globalization in Angular Splitter component

4 Mar 20262 minutes to read

The Angular Splitter component provides globalization features, including right-to-left (RTL) rendering for languages such as Arabic and Hebrew.

Right-to-Left (RTL) support

To enable RTL layout, set the enableRtl property to true. This adjusts the direction of the Splitter panes and split bars to accommodate RTL writing systems.

The following code demonstrates how to enable RTL behavior.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SplitterModule } from '@syncfusion/ej2-angular-layouts'




import { Component } from '@angular/core';

@Component({
imports: [
         FormsModule, SplitterModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
      <div id='container'>
         <ejs-splitter #plain height='200px' width='600' enableRtl='true'>
            <e-panes>
                <e-pane size='200px' content='<div class="content">Left pane</div>'>
                </e-pane>
                <e-pane size='200px' content='<div class="content">Middle pane</div>'>
                </e-pane>
                <e-pane size='200px' content='<div class="content">Right pane</div>'>
                </e-pane>
            </e-panes>
          </ejs-splitter>
      </div>`
})
export class AppComponent {
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also