Change menu items dynamically in Angular Context menu component

4 Sep 20254 minutes to read

The ContextMenu component supports dynamic menu item changes based on the target element where the context menu is triggered. This functionality enables context-aware menus that display different options depending on the specific area or element the user interacts with, enhancing user experience through relevant, targeted actions.

To implement dynamic menu items, initialize the ContextMenu with a comprehensive set of all possible items using the items property. Then, use the beforeOpen event to selectively show or hide specific items based on the target context. This approach leverages the hideItems and showItems methods to control menu item visibility dynamically.

The beforeOpen event provides access to the target element through its event arguments, allowing you to determine the appropriate menu items to display based on element properties, classes, or other identifying attributes.

In the following example, the menu items change contextually based on the target area: the Clipboard div displays Cut, Copy, and Paste options, while the Editor div shows Add, Edit, and Delete actions. This dynamic behavior is implemented using the hideItems and showItems methods within the beforeOpen event handler.

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, ViewChild } from '@angular/core';
import { MenuItemModel, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';
import { ContextMenuComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        ContextMenuModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
            <!--target element-->
            <div id="target">
              <div id='left' class='e-div'>Clipboard</div>
              <div id='right' class='e-div'>Editor</div>
            </div>
            <!-- To Render ContextMenu. -->
            <ejs-contextmenu #contextmenu target='#target .e-div' [items]= 'menuItems' (beforeOpen)='beforeOpen($event)'></ejs-contextmenu>
            </div>`
})

export class AppComponent {
    @ViewChild('contextmenu')
    public cmenu?: ContextMenuComponent;
    // Initialize menu items.
    public menuItems: MenuItemModel[] = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    },
    {
        text: 'Add'
    },
    {
        text: 'Edit'
    },
    {
        text: 'Delete'
    }];

    public beforeOpen (args: BeforeOpenCloseMenuEventArgs) {
       // To hide/show items on right click.
        if ((args.event.target as HTMLElement).id === 'right') {
                (this.cmenu as ContextMenuComponent).hideItems(['Cut', 'Copy', 'Paste']);
                (this.cmenu as ContextMenuComponent).showItems(['Add', 'Edit', 'Delete']);
        } else if ((args.event.target as HTMLElement).id === 'left') {
            (this.cmenu as ContextMenuComponent).showItems(['Cut', 'Copy', 'Paste']);
            (this.cmenu as ContextMenuComponent).hideItems(['Add','Edit','Delete']);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));