How to Create a Custom Angular Dropdown Menu with Chip-Based Display?

This article provides a guide on how to create a custom Angular Dropdown Menu that displays a list of menu items with checkbox selections for submenus. The selected submenu items will be displayed as chips, allowing for a clear and organized view of the user’s selections.

Implementation Steps

1. Setup the Chip List: Use the ejs-chiplist component to display selected submenu items as chips. The enableDelete property allows users to remove chips if needed.

   <div class="chip-container">
       <ejs-chiplist
           [chips]="chips"
           enableDelete="true"
           (deleted)="deletedChips($event)"
       ></ejs-chiplist>
   </div>
   

2. Create the Menu: Implement the ejs-menu component to create a vertical menu. The menu will include a template for rendering submenu items with checkboxes.

   <div id="target">
       <ejs-menu
           #menu
           [items]="menuItems"
           orientation="Vertical"
           (beforeClose)="onCloseMenu($event)"
           (beforeOpen)="onOpenMenu($event)"
           showItemOnClick="true"
       >
           <ng-template #template let-dataSource="">
               {{ dataSource.text }}
               <div *ngIf="dataSource.customListbox">
                   <ejs-listbox
                       [dataSource]="data"
                       [selectionSettings]="selection"
                       [value]="values"
                       (change)="onChange($event, dataSource)"
                   ></ejs-listbox>
               </div>
           </ng-template>
       </ejs-menu>
   </div>
   

3. Dropdown Button: Use the ejs-dropdownbutton component to trigger the dropdown menu. The button can be styled and configured to show an icon and handle events for opening and closing.

   <button
       ejs-dropdownbutton
       target="#target"
       content="Filter"
       iconCss="e-icons e-filter"
       cssClass="e-caret-hide"
       (beforeClose)="onCloseDdb($event)"
       (beforeOpen)="onCreated($event)"
   ></button>
   

Event Handling

• Chip Deletion: Implement the deletedChips method to handle the removal of chips when the delete icon is clicked.

• Menu Events: Use onCloseMenu and onOpenMenu methods to manage the state of the menu when it is opened or closed.

• Listbox Change: The onChange method should be implemented to update the chip list based on the selections made in the listbox.

Sample Demo link: Sample link

This setup allows for a dynamic and interactive user interface where users can select multiple submenu items and view their selections as chips. This enhances the user experience by providing a clear visual representation of their choices.

Additional References

• Syncfusion Menu Component Documentation
• Syncfusion ChipList Component Documentation
• Syncfusion ListBox Component Documentation

Conclusion
I hope you enjoyed learning on how to create a custom Angular Dropdown Menu with chip-based display.
You can refer to our Angular Dropdown Menu feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Dropdown Menu example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!