Right to left in Angular Radio button component

27 Sep 20232 minutes to read

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

app.component.ts

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

@Component({
    selector: 'app-root',
    // To customize RadioButton appearance
    template: ` <div class="e-section-control">
                <ul>
               <li><ejs-radiobutton label="Option 1" name="default" enableRtl="true" checked="true"></ejs-radiobutton></li>
               <li><ejs-radiobutton label="Option 2" name="default" enableRtl="true"></ejs-radiobutton></li>
               </ul>
               </div>`
})

export class AppComponent { }

app.module.ts

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

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        RadioButtonModule
    ],
    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);