Add or remove context menu items in Angular Context menu component

27 Apr 20243 minutes to read

ContextMenu items can be added or removed using the insertAfter, insertBefore and removeItems methods.

In the following example, the Display Settings menu items are added before the Personalize item, the Sort By menu items are added after the Refresh, and the Paste item is removed from context menu.

app.component.ts

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

@Component({
imports: [
        
        ContextMenuModule
    ],


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

export class AppComponent {
     @ViewChild('contextmenu')
    public contextmenu?: ContextMenuComponent;

    public menuItems: MenuItemModel[] = [
    {
        text: 'View',
        items: [
          {
            text: 'Large icons'
          },
          {
            text: 'Medium icons'
          },
          {
            text: 'Small icons'
          }
        ]
    },
    {
        text: 'Refresh'
    },
    {
        text: 'Paste'
    },
    {
        separator: true
    },
    {
        text: 'New'
    },
    {
        separator: true
    },
    {
        text: 'Personalize'
    }];

    onCreated(): void {
      (this.contextmenu as ContextMenuComponent).insertAfter([{text: 'Sort By'}] , 'Refresh');
      (this.contextmenu as ContextMenuComponent).insertBefore([{text: 'Display Settings'}] , 'Personalize');
      (this.contextmenu as ContextMenuComponent).removeItems(['Paste']);
    }

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));