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