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

3 mins read

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

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>

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>

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

Conclusion

I hope you enjoyed learning how to create a custom Angular Dropdown Menu with a chip-based display.

You can refer to our Angular Dropdown Menu feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with 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 on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore 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, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)