Enable or disable context menu items in Angular Context menu component
16 Jun 20234 minutes to read
You can enable and disable the menu items using the enableItems
method in ContextMenu. To enable menuItems, set the enable
property in argument to true
and vice-versa.
In the following example, the Display Settings in parent items and Medium icons in sub menu items are disabled.
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()' (beforeOpen)='beforeOpen()'></ejs-contextmenu>`
})
export class AppComponent {
@ViewChild('contextmenu')
public contextmenu?: ContextMenuComponent;
// ContextMenu items definition
public menuItems: MenuItemModel[] = [
{
text: 'View',
items: [
{
text: 'Large icons'
},
{
text: 'Medium icons'
},
{
text: 'Small icons'
}
]
},
{
text: 'Sort By'
},
{
text: 'Refresh'
},
{
separator: true
},
{
text: 'New'
},
{
separator: true
},
{
text: 'Display Settings'
},
{
text: 'Personalize'
}];
onCreated(): void {
(this.contextmenu as ContextMenuComponent).enableItems(['Display Settings'], false);
}
beforeOpen(): void {
(this.contextmenu as ContextMenuComponent).enableItems(['Medium icons'], false);
}
}
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);
To disable sub menu items, use the
beforeOpen
event.