ContextMenuComponent

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

@Component({
    selector: 'my-app',
    template: `
        <div #target class="target">
            <p class="placeholder">Right-click to open Context menu</p>
        </div>
        <kendo-contextmenu [target]="target" [items]="items"> </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);