Data Binding

The ContextMenu enables you to bind it to an array of MenuItem objects by using its items property.

The ContextMenu supports the same binding directives which are supported by the Menu component.

import { Component } from '@angular/core';
import { CategoriesService } from './categories.service';

@Component({
    providers: [CategoriesService],
    selector: 'my-app',
    template: `
        <div #target class="target">
            <p class="placeholder">Right-click to open Context menu</p>
        </div>
        <kendo-contextmenu
            [target]="target"
            [kendoMenuHierarchyBinding]="categories"
            [textField]="['CategoryName', 'ProductName']"
            childrenField="Products"
        >
        </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 categories: any[];

    constructor(categoriesService: CategoriesService) {
        categoriesService.fetchCategories().subscribe((categories) => {
            this.categories = categories;
        });
    }
}
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 { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ContextMenuModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class CategoriesService {

    private BASE_URL = 'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc';

    constructor(private http: HttpClient) { }

    public fetchCategories(): Observable<any[]> {
        return this.fetch(`${this.BASE_URL}/Categories?$expand=Products`);
    }

    private fetch(url: string): Observable<any[]> {
        return this.http
            .get(url)
            .pipe(map((response: any) => response.value));
    }
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article