Getting Started

This section explains how to create a simple ButtonGroup, and configure its available functionalities by using the Essential JS 2 quickstart seed repository.

Dependencies

The following list of dependencies are required to use the ButtonGroup component in your application.

|-- @syncfusion/ej2-splitbuttons

Installation and configuration

To setup basic Angular sample use following commands.

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

For more information, refer to Angular sample setup.

Install Syncfusion ButtonGroup packages using below command.

npm install @syncfusion/ej2-splitbuttons --save

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-splitbuttons/styles/material.css";

Modify the template in app.component.ts file with a div element with class name as e-btn-group and button element that needs to group inside the div element. To render button as a Angular component, Button dependencies should be configured in system.config.ts and import Button module into the angular application(app.module.ts) from the package @syncfusion/ej2-angular-buttons.

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

@Component({
  selector: 'my-app',
  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  { }

Run the application in the browser using the following command:

npm start

The following example shows a basic ButtonGroup component.

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>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);

Orientation

ButtonGroup can be arranged both in a vertical and horizontal orientation. By default, it is horizontally oriented.

Vertical Orientation

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.