Right to left in Angular Button component

27 Sep 20231 minute to read

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 Button component.

app.component.ts

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

@Component({
    selector: 'app-root',
    styleUrls:['./style.css'],
    template:  `<div class="e-section-control">
    <button ejs-button iconCss="e-btn-icons e-setting-icon" [enableRtl]="true">Settings</button></div>`
})

export class AppComponent { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);