Add or remove context menu items in Angular Context menu component
4 Apr 20234 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.
import { Component, ViewChild } from '@angular/core';
import { ContextMenuComponent, MenuEventArgs, MenuItemModel } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<!--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>`
})
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.insertAfter([{text: 'Sort By'}] , 'Refresh');
this.contextmenu.insertBefore([{text: 'Display Settings'}] , 'Personalize');
this.contextmenu.removeItems(['Paste']);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ContextMenuModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);