This section explains how to create a simple CSS ButtonGroup, and demonstrate the basic usage of the CSS ButtonGroup component in an Angular environment.
The following list of dependencies are required to use the ButtonGroup component in your application.
|-- @syncfusion/ej2-splitbuttons
You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.
npm install -g @angular/cli
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
To install ButtonGroup package, use the following command.
npm install @syncfusion/ej2-angular-buttons --save
The above package installs Button dependencies which are required to render the ButtonGroup component in the Angular environment.
Import Button module into Angular application(app.module.ts) from the package
@syncfusion/ej2-angular-buttons
.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Imported Syncfusion button module from buttons package.
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, ButtonModule ], // Registering EJ2 Button Module
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Modify the template in app.component.ts
file to render the ButtonGroup component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<div class='e-btn-group'>
<button ejs-button>HTML</button>
<button ejs-button>CSS</button>
<button ejs-button>Javascript</button>
</div>`
})
export class AppComponent { }
To render Button in CSS ButtonGroup component, import Button module into the angular application(app.module.ts) from the package
@syncfusion/ej2-angular-buttons
and its styles instyle.css
.
Add ButtonGroup component’s styles as given below in style.css
.
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
Run the application in the browser using the following command:
ng serve
The following example shows a basic ButtonGroup component.
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>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);
ButtonGroup can be arranged both in a vertical and horizontal orientation. By default, it is horizontally oriented.
ButtonGroup can be aligned vertically by using the built-in CSS e-vertical
to the target element.
The following example illustrates how to achieve vertical orientation in ButtonGroup.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To render ButtonGroup. -->
<div class='e-btn-group e-vertical'>
<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);
ButtonGroup does not support SplitButton component nesting in a vertical orientation.