Angular Split Button — Simple and Flexible Component

Overview

The Angular Split Button triggers a default action when the primary button is clicked and provides a list of actions when the drop-down button is clicked. It has built-in support for icons and their positioning, varied sizes, disabling items, separators, RTL, and UI customization.

Other supported frameworks

Split Button is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Split Button platforms from the links below,

• Blazor Split Button
• React Split Button
• Vue Split Button
• JavaScript Split Button

Angular Split Button Code Example

Easily get started with the Angular Split Button using a few simple lines of TS codes as demonstrated below. Also explore our Angular Split Button Example that shows you how to render and configure a Split Button in Angular.

<ejs-splitbutton content="Paste" [items]='items'></ejs-splitbutton>`

import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
selector: 'app-root',
template: `<!-- To Render splitbutton. -->
          <ejs-splitbutton content="Paste" [items]='items'></ejs-splitbutton>`
})

export class AppComponent {
 public items: ItemModel[] = [
{ text: 'Cut'},
{ text: 'Copy'},
{ text: 'Paste'}
];
}