Set the disabled state in Angular Radio button component

27 Apr 20244 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.

app.component.ts

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




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

@Component({
imports: [
        
        RadioButtonModule
    ],


standalone: true,
    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;
    }
}

main.ts

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