Components / Menus / ContextMenu

Templates

The ContextMenu enables you to customize its content, items, and the content of its items by using templates.

Content Template

To set a template for the content of the ContextMenu popup, add an <ng-template> tag with the kendoContextMenuTemplate directive inside the ContextMenu component.

When you implement custom content, the options that are related to the Menu, such as items, will not be applied.

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" #menu>
            <ng-template kendoContextMenuTemplate>
                <div style="padding: 10px;" (click)="onMyItemSelect(); menu.hide()">My Context Menu Item</div>
            </ng-template>
        </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 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);

Item Templates

The ContextMenu supports the same item templates which are supported by the Menu component.

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

const is = (fileName: string, ext: string) => new RegExp(`.${ext}\$`).test(fileName);

@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">
            <ng-template kendoMenuItemTemplate let-item="item">
                <span [ngClass]="iconClass(item)"></span>
                {{ item.text }}
            </ng-template>
        </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[] = files;

    public iconClass({ text, items }: any): any {
        return {
            'k-i-file-pdf': is(text, 'pdf'),
            'k-i-folder': items !== undefined,
            'k-i-html': is(text, 'html'),
            'k-i-image': is(text, 'jpg|png'),
            'k-icon': true
        };
    }
}

export const files: any[] = [{
    text: 'My Documents',
    items: [
        {
            text: 'Kendo UI Project',
            items: [
                { text: 'about.html' },
                { text: 'index.html' },
                { text: 'logo.png' }
            ]
        },
        {
            text: 'New Web Site',
            items: [
                { text: 'mockup.jpg' },
                { text: 'Research.pdf' }
            ]
        },
        {
            text: 'Reports',
            items: [
                { text: 'February.pdf' },
                { text: 'March.pdf' },
                { text: 'April.pdf' }
            ]
        }
    ]
}];

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