Context menu item click in Angular Context menu component

4 Sep 20254 minutes to read

This section explains how to configure submenus to open on Context Menu item click instead of the default hover behavior. This functionality can be achieved by using the showItemOnClick property of the Context Menu component.

By default, Context Menu submenus open when users hover over parent menu items. However, in scenarios where you want more deliberate user interaction or need to prevent accidental submenu activation, you can enable click-based submenu opening. When showItemOnClick is set to true, users must explicitly click on parent menu items to reveal their submenus, providing more controlled navigation and reducing unintentional submenu displays.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations'
import { enableRipple } from '@syncfusion/ej2-base'
import { Component } from '@angular/core';
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';

enableRipple(true);

@Component({
imports: [
        
        ContextMenuModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Menu. -->
            <div id="target">Right click / Touch hold to open the ContextMenu</div>
            <ejs-contextmenu #contextmenu target='#target' [items]='menuItems' showItemOnClick="true" ></ejs-contextmenu>
            </div>`
})

export class AppComponent {

    public menuItems: MenuItemModel[] = [
        {
            text: 'Show All Bookmarks'
        },
        {
            text: 'Bookmarks Toolbar',
            items: [
                {
                    text: 'Most Visited',
                    items:[
                        {
                            text: 'Gmail'
                        },
                        {
                            text: 'Google'
                        }
                    ]
                },
                {
                    text: 'Recently Added'
                }
            ]
        }
    ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));