Search results

Show ButtonGroup selected state on initial render in Angular ButtonGroup component

21 Dec 2022 / 1 minute to read

To show selected state on initial render, checked property should to added to the corresponding input element.

The following example illustrates how to show selected state on initial render.

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'>
                    <input type="checkbox" id="checkbold" name="font" value="bold" checked/>
                    <label class="e-btn" for="checkbold">Bold</label>
                    <input type="checkbox" id="checkitalic" name="font" value="italic" />
                    <label class="e-btn" for="checkitalic">Italic</label>
                    <input type="checkbox" id="checkline" name="font" value="underline"/>
                    <label class="e-btn" for="checkline">Underline</label>
                </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);