Populate menu items with data source in Angular Context menu component

28 Sep 20234 minutes to read

To bind local data source to the ContextMenu, menu items are populated from data source and mapped
to items property.

The below example demonstrates how to bind local data source to the ContextMenu.

app.component.ts

import { Component } from '@angular/core';
import { MenuEventArgs, MenuItemModel } from '@syncfusion/ej2-navigations';
import { Record, data } from './datasource';

@Component({
  selector: 'app-root',
  template: `<div class="e-section-control">
            <!--target element-->
            <div id="target">Right click / Touch hold to open the ContextMenu</div>

            <!-- To Render ContextMenu. -->
            <ejs-contextmenu id='contextmenu' target='#target' [items]= 'items'
            (beforeItemRender)='itemRender($event)'></ejs-contextmenu>
            </div>`
})

export class AppComponent {
    public items: MenuItemModel[] = this.Items();
    public Items() {
    let record: Record;
    let menuItems: any[] = [];
    for (let i = 0; i < data.length; i++) {
        record = data[i] as Record;
        if (record.parentId) {
            if (!menuItems[record.parentId - 1].items) {
                menuItems[record.parentId - 1].items = []
            }
            menuItems[record.parentId - 1].items.push({ text: record.text });
        } else {
            menuItems.push({ text: record.text });
            }
        }
        return menuItems;
    }
    public itemRender(args: MenuEventArgs ) {
            if (!args.item.text) {
                args.element.classList.add('e-separator');
            }
        }
    }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ContextMenuModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);