Context menu item click in Angular Context menu component
28 Sep 20234 minutes to read
This section explains about how to open a sub menu on Context Menu item click. This can be achieved by using ShowItemOnClick
property of the Context Menu.
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';
enableRipple(true);
@Component({
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 { 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';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);