Search results

Disable in Angular ButtonGroup component

26 Oct 2021 / 1 minute to read

Particular button

To disable a particular button in a ButtonGroup, disabled attribute should be added to corresponding button element.

Whole ButtonGroup

To disable whole ButtonGroup, disabled attribute should be added to all the button elements.

The following example illustrates how to disable the particular and the whole ButtonGroup.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<!-- To render ButtonGroup. -->
               <div class='e-btn-group'>
                    <button ejs-button>HTML</button>
                    <button ejs-button [disabled]="true">CSS</button>
                    <button ejs-button>Javascript</button>
                </div>
                <div class='e-btn-group'>
                    <button ejs-button [disabled]="true">HTML</button>
                    <button ejs-button [disabled]="true">CSS</button>
                    <button ejs-button [disabled]="true">Javascript</button>
                </div>`
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

To disable radio/checkbox type ButtonGroup, the disabled attribute should be added to the particular input element.