Items
You can instantiate the ContextMenu items by initializing them as MenuItem components and use their corresponding properties.
The ContextMenu supports the same item options which are supported by the Menu component.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div #target class="target">
<p class="placeholder">Right-click to open Context menu</p>
</div>
<kendo-contextmenu [target]="target">
<kendo-menu-item text="Item1">
<kendo-menu-item text="Item1.1">
</kendo-menu-item>
<kendo-menu-item text="Item1.2">
</kendo-menu-item>
</kendo-menu-item>
<kendo-menu-item [separator]="true">
</kendo-menu-item>
<kendo-menu-item text="Item2">
</kendo-menu-item>
</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;
}
`
]
})
class AppComponent {
}