Dropdown Button

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"> 
             <tr>
                 <td colspan="2">
                     <ej-splitbutton id="spltbutton11" target="#menu" size="medium" [showRoundedCorner]=true text="login"></ej-splitbutton>
                     <ul id="menu">
                         <li><span>User</span></li>
                         <li><span>Guest</span></li>
                         <li><span>Admin</span></li>
                     </ul>
                 </td>
             </tr>
         </table>
        </div>
  • html
  • import { Component } from '@angular/core';
    import { ViewEncapsulation } from '@angular/core';
    
    @Component({
        selector: 'ej-app',
        templateUrl: './splitButton.component.html',
    	encapsulation: ViewEncapsulation.None,
    })
    export class SplitButtonComponent {
        constructor() {}
    }

    Execute the above code to render the following output.