ContextMenuTemplateDirective

Represents a template for the content of the ContextMenu. To define a template, nest an <ng-template>
tag with the kendoContextMenuTemplate directive inside a <kendo-contextmenu> component
(more information and examples).

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

@Component({
    selector: 'my-app',
    template: `
        <div #target>Target</div>
        <kendo-contextmenu [target]="target" #menu>
          <ng-template kendoContextMenuTemplate>
              <div style="padding: 10px;" (click)="onMyItemSelect();menu.hide()">My Context Menu Item</div>
          </ng-template>
        </kendo-contextmenu>
    `
})
export class AppComponent {
    public onMyItemSelect(): void {
        console.log('My item selected');
    }
}
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);

Selector

[kendoContextMenuTemplate]