Search results

How to

Initialize ButtonGroup using util function

Though, it is a CSS component for easy initialization of ButtonGroup createButtonGroup util function can be used.

To use createButtonGroup util function, SplitButton dependencies should be configured and it should be added in system.config.js.

Using createButtonGroup method, the Button options, selector, and cssClass is passed and the corresponding classes is added to the elements.

Create basic ButtonGroup

To create a basic ButtonGroup, the target element along with the button elements should be created and createButtonGroup should be imported from ej2-splitbuttons.

Create radio type ButtonGroup

To create a radio type ButtonGroup, the target element along with the input elements should be created with type radio.

Create checkbox type ButtonGroup

Checkbox type ButtonGroup creation is similar to radio type ButtonGroup, instead the type of the input elements should be checkbox.

The following example illustrates how to create ButtonGroup using createButtonGroup function for basic, checkbox, and radio type behaviors.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';
import { createButtonGroup } from '@syncfusion/ej2-splitbuttons';

@Component({
    selector: 'app-container',
    template: `<!-- To render ButtonGroup. -->
               <h5>Normal behavior</h5>
               <div id='basic'>
                    <button></button>
                    <button></button>
                    <button></button>
                </div>
                <h5>Checkbox type behavior</h5>
                <div id='checkbox'>
                    <input type="checkbox" id="checkbold" name="font" value="bold" />
                    <input type="checkbox" id="checkitalic" name="font" value="italic" />
                    <input type="checkbox" id="checkundeline" name="font" value="underline" />
                </div>
                <h5>Radiobutton type behavior</h5>
                <div id='radio'>
                    <input type="radio" id="radioleft" name="align" value="left" />
                    <input type="radio" id="radiomiddle" name="align" value="middle" />
                    <input type="radio" id="radioright" name="align" value="right" />
                </div>`
})

export class AppComponent {

ngOnInit() {
createButtonGroup('#basic', {
    buttons: [
        { content: 'HTML' },
        { content: 'CSS' },
        { content: 'Javascript'}
    ]
});

createButtonGroup('#checkbox', {
    buttons: [
        { content: 'Bold' },
        { content: 'Italic' },
        { content: 'Undeline'}
    ]
});

createButtonGroup('#radio', {
    buttons: [
        { content: 'Left' },
        { content: 'Center' },
        { content: 'Right'}
    ]
});
}
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

If null value is passed in button options, then that particular button will be skipped from processing in createButtonGroup util function.

Create ButtonGroup with icons

To create ButtonGroup with icons, iconCss property of the button component can be used.

The following example illustrates how to create ButtonGroup with icons.

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

@Component({
    selector: 'app-container',
    template: `<!-- To render ButtonGroup. -->
               <div class='e-btn-group'>
                  <button ejs-button iconCss='e-icons e-left-icon'>Left</button>
                  <button ejs-button iconCss='e-icons e-middle-icon'>Right</button>
                  <button ejs-button iconCss='e-icons e-right-icon'>Middle</button>
                </div>`
})

export class AppComponent { }
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Create ButtonGroup with rounded corner

The ButtonGroup with rounded corner has round edges on both side. In the ButtonGroup with rounded corner, e-round-corner class is to be added to the target element.

The following example illustrates how to create ButtonGroup with rounded corner.

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

@Component({
    selector: 'app-container',
    template: `<!-- To render ButtonGroup. -->
               <div class='e-btn-group e-round-corner'>
                 <button ejs-button>HTML</button>
                 <button ejs-button>CSS</button>
                 <button ejs-button>Javascript</button>
               </div>`
})

export class AppComponent { }
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Enable RTL

ButtonGroup supports RTL functionality. This can be achieved by adding e-rtl class to the target element.

The following example illustrates how to create ButtonGroup with RTL support.

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

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

export class AppComponent { }
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Disable

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
import { Component } from '@angular/core';

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

export class AppComponent { }
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 { }
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.

Enable ripple

Ripple can be enabled by importing enableRipple method from ej2-base and set enableRipple as true.

The following example illustrates how to enable ripple for ButtonGroup.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';

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

export class AppComponent {
enableRipple(true);
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Form submit

The name attribute of the input element is used to group radio/checkbox type ButtonGroup. When the radio/checkbox type are grouped in form, the checked items value attribute will be posted to server on form submit that can be retrieved through the name. The disabled radio/checkbox type value will not be sent to the server on form submit.

In the following code snippet, the radio type ButtonGroup is explained with male value as checked. Now, the value that is in checked state will be sent on form submit.

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

@Component({
    selector: 'app-container',
    template: `<!-- To render ButtonGroup. -->
              <form>
                <div class='e-btn-group'>
                    <input type="radio" id="male" name="gender" value="male" checked/>
                    <label class="e-btn" for="male">Male</label>
                    <input type="radio" id="female" name="gender" value="female"/>
                    <label class="e-btn" for="female">Female</label>
                    <input type="radio" id="transgender" name="gender" value="transgender"/>
                    <label class="e-btn" for="transgender">Transgender</label>
                </div>
                <button class='e-btn e-primary'>Submit</button>
            </form>`
})

export class AppComponent {
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Show ButtonGroup selected state on initial render

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
import { Component } from '@angular/core';

@Component({
    selector: 'app-container',
    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 { }
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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