How to create right-to-left splitbutton in Angular Split Button

25 Sep 20262 minutes to read

Angular Split Button component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in Angular Split Button component.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons'


 
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
imports: [
        
        SplitButtonModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To Render splitbutton. -->
               <ejs-splitbutton content="Autosum" [items]='items' iconCss="e-sb e-sigma" enableRtl=true></ejs-splitbutton></div>`
})

export class AppComponent {
  public items: ItemModel[] = [
      {
        text: 'Autosum'
    },
    {
        text: 'Average'
    },
    {
        text: 'Count numbers',
    },
    {
        text: 'Min'
    },
    {
        text: 'Max'
    }];
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));