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);