ButtonGroup supports radio type selection in which only one button can be selected. This can be achieved by adding input element
along with id attribute with its corresponding label along with for attribute inside the target element. In this ButtonGroup,
the type of the input element should be radio and e-btn is added to the label element.
The following example illustrates the single selection behavior in ButtonGroup.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To render ButtonGroup. -->
<div class='e-btn-group'>
<input type="radio" id="radioleft" name="font" value="left"/>
<label class="e-btn" for="radioleft">Left</label>
<input type="radio" id="radiomiddle" name="font" value="middle"/>
<label class="e-btn" for="radiomiddle">Center</label>
<input type="radio" id="radioright" name="font" value="right"/>
<label class="e-btn" for="radioright">Right</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);ButtonGroup supports checkbox type selection in which multiple button can be selected. This can be achieved by adding input element
along with id attribute with its corresponding label along with for attribute inside the target element. In this ButtonGroup,
the type of the input element should be checkbox and e-btn is added to the label element.
The following example illustrates the multiple selection behavior in ButtonGroup.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To render ButtonGroup. -->
<div class='e-btn-group'>
<input type="checkbox" id="check_bold" name="align" value="bold"/>
<label class="e-btn" for="check_bold">Bold</label>
<input type="checkbox" id="check_italic" name="align" value="italic"/>
<label class="e-btn" for="check_italic">Italic</label>
<input type="checkbox" id="check_underline" name="align" value="underline"/>
<label class="e-btn" for="check_underline">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);Nesting with other components can be possible in ButtonGroup. The following components can be nested in ButtonGroup,
For nesting support, SplitButton dependencies should be configured and added in
system.config.js.
To initialize DropDownButton component, refer DropDownButton Getting Started documentation.
In the following example, the DropDownButton component is rendered in app.component.ts and DropDownButtonModule is imported in
app.module.ts file.
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
selector: 'app-root',
template: `<!-- To render ButtonGroup. -->
<div class='e-btn-group'>
<button class='e-btn'>HTML</button>
<button class='e-btn'>CSS</button>
<button class='e-btn'>Javascript</button>
<button ejs-dropdownbutton [items]='items' content='More'></button>
</div>`
})
export class AppComponent {
private items: ItemModel[] = [
{
text: 'Learn SQL'
},
{
text: 'Learn PHP'
},
{
text: 'Learn Bootstrap'
}];
}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';
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
DropDownButtonModule,
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 initialize SplitButton component refer SplitButton Getting Started documentation.
In the following example, the SplitButton component is rendered in app.component.ts and SplitButtonModule is imported in
app.module.ts file.
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
selector: 'app-root',
template: `<!-- To render ButtonGroup. -->
<div class='e-btn-group'>
<button class='e-btn'>Cut</button>
<button class='e-btn'>Copy</button>
<ejs-splitbutton content="Paste" [items]='items'></ejs-splitbutton>
</div>`
})
export class AppComponent {
private items: ItemModel[] = [
{
text: 'Paste'
},
{
text: 'Paste Text'
},
{
text: 'Paste Special'
}];
}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';
import { SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SplitButtonModule,
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);