Dropdown Button in EJ 1 Angular SplitButton

3 Oct 2017 / 2 minutes to read

You can change the Split Button as Dropdown Button that consists of a single button that when clicked displays a drop-down list of mutually exclusive items. You can achieve this by using default functionality of Split Button.Initially the target is a mandatory one.

The following steps explain how to change the Split Button as Dropdown Button.

In the HTML page, add the following button elements to configure Button widget.

  • html
  • <div align="center">
        <table width="500px" align="center"> 
                 <td colspan="2">
                     <ej-splitbutton id="spltbutton11" target="#menu" size="medium" [showRoundedCorner]=true text="login"></ej-splitbutton>
                     <ul id="menu">
  • html
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
        selector: 'ej-app',
        templateUrl: './splitButton.component.html',
    	encapsulation: ViewEncapsulation.None,
    export class SplitButtonComponent {
        constructor() {}

    Execute the above code to render the following output.