Set the disabled state in Angular Radio button component

27 Sep 20234 minutes to read

RadioButton component can be enabled/disabled by giving disabled property. To disable RadioButton component, the disabled property can be set as true.

The following example illustrates how to disable a radio button and the selected one is displayed using change event.

import { Component, ViewChild } from '@angular/core';
import { ChangeEventArgs, RadioButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
    selector: 'app-root',
    // To customize RadioButton appearance
    template: `<div class="e-section-control">
                <ul>
                  <li>
                      <div id="text">Selected : Option 1</div>
                  </li>
                  <li>
                      <ejs-radiobutton #radio1 label="Option 1" name="default" checked="true" (change)='changeOption1($event)'></ejs-radiobutton>
                  </li>
                  <li>
                      <ejs-radiobutton #radio2 label="Option 2" name="default"  disabled="true" (change)='changeOption2($event)'></ejs-radiobutton>
                  </li>
                  <li>
                      <ejs-radiobutton #radio3 label="Option 3" name="default" (change)='changeOption3($event)'></ejs-radiobutton>
                  </li>
               </ul>
               </div>`
})

export class AppComponent {
    @ViewChild('radio1')
    public radio1?: RadioButtonComponent;
    @ViewChild('radio2')
    public radio2?: RadioButtonComponent;
    @ViewChild('radio3')
    public radio3?: RadioButtonComponent;
    public changeOption1 (args: ChangeEventArgs) {
        document.getElementById('text')!.innerText = 'Selected : ' + this.radio1!.label;
    }
    public changeOption2 (args: ChangeEventArgs) {
        document.getElementById('text')!.innerText = 'Selected : ' + this.radio2!.label;
    }
    public changeOption3 (args: ChangeEventArgs) {
        document.getElementById('text')!.innerText = 'Selected : ' + this.radio3!.label;
    }
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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