Opening

By default, the ContextMenu opens when the contextmenu event of the target element is triggered.

To change the event on which the ContextMenu will open, set the showOn input to the name of the desired event.

import { Component } from '@angular/core';
import { items } from './items';

@Component({
    selector: 'my-app',
    template: `
        <div #target class="target">
            <p class="placeholder">Click to open Context menu</p>
        </div>
        <kendo-contextmenu [target]="target" [items]="items" showOn="click"> </kendo-contextmenu>
    `,
    styles: [
        `
            .target {
                border-radius: 5px;
                height: 100px;
                width: 400px;
                background-color: #f6f6f6;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08);
            }
            .placeholder {
                font-size: 20px;
                color: #656565;
                margin: 0;
            }
        `
    ]
})
export class AppComponent {
    public items: any[] = items;
}
export const items: any[] = [{
    text: 'Item1',
    items: [{ text: 'Item1.1' }, { text: 'Item1.2' }]
}, {
    text: 'Item2'
}, {
    text: 'Item3'
}];
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ContextMenuModule } from '@progress/kendo-angular-menu';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ContextMenuModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article