Show buttongroup selected state on initial render in Angular Button group component

27 Sep 20232 minutes 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.

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- 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>
                </div>`
})

export class AppComponent { }

app.module.ts

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 { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);