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>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);

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>Target</div>
       <kendo-contextmenu [target]="target" [items]="items">
            <ng-template kendoMenuItemTemplate let-item="item">
                <span [ngClass]="iconClass(item)"></span>
                {{item.text}}
            </ng-template>
       </kendo-contextmenu>
   `
})
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);

Suggested Links

• API Reference of the ContextMenu