All Components

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>
            Target
        </div>
        <kendo-contextmenu [target]="target" [kendoMenuHierarchyBinding]="categories"
            [textField]="['CategoryName', 'ProductName']" childrenField="Products">
        </kendo-contextmenu>
    `
})
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/Observable';

import { map } from 'rxjs/operators/map';

@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