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: `<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>`
})
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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);