Search results

Set the disabled state

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
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);