Components / Menus / API

ContextMenuComponent

Represents the Kendo UI ContextMenu component for Angular.

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

@Component({
    selector: 'my-app',
    template: `
        <div #target>
            Target
        </div>
        <kendo-contextmenu [target]="target" [items]="items">
        </kendo-contextmenu>
    `
})
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);

Selector

kendo-contextmenu

Export Name

Accessible in templates as #kendoContextMenuInstance="kendoContextMenu"

Inputs

alignToAnchor boolean

Indicates that the ContextMenu will be aligned to the target or to the filter element (if specified).

anchorAlign Align

Specifies the pivot point of the anchor. Applicable if alignToAnchor is true.

animate boolean | MenuAnimation

Sets the Menu animation.

appendTo ViewContainerRef

Defines the container to which the popup will be appended.

ariaLabel string

Sets the value for the aria-label attribute of the ContextMenu.

collision Collision

Configures the collision behavior of the popup.

filter string

Specifies a CSS selector which filters the elements in the target for which the ContextMenu will open
(see example).

hoverDelay number

Specifies the delay in milliseconds before the Menu items are opened or closed on item hover
or leave (see example). Used to avoid the accidental
opening or closing of the items.