Customize menu items in Angular Menu component

12 Sep 202519 minutes to read

This section demonstrates how to dynamically add, remove, enable, disable, show, or hide menu items in the Angular Menu component using methods like insertAfter, insertBefore, removeItems, enableItems, showItems, and hideItems, along with the beforeOpen event for advanced customization.

Add or remove menu items

Menu items can be added or removed using the insertAfter, insertBefore, and removeItems methods, which accept a string[] of item identifiers (text or ID) and an optional isUniqueId parameter to specify whether the id property is used.

In the following example, Europe menu items are added before the Oceania item, Africa menu items are added after Asia, and South America and Mexico items are removed from the menu.

Set isUniqueId to true to process items using their id property instead of text.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MenuModule } from '@syncfusion/ej2-angular-navigations'



import { Component, ViewChild } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent, FieldSettingsModel } from '@syncfusion/ej2-angular-navigations';

enableRipple(true);

@Component({
imports: [ MenuModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <!-- To Render Menu. -->
            <ejs-menu #menu [items]='data' [fields]='menuFields' (created)='created()'></ejs-menu></div>`
})

export class AppComponent {
    @ViewChild('menu')
    public menuObj?: MenuComponent;

    //Menu datasource
    public data: { [key: string]: Object }[] = [
        {
            continent: 'Asia',
            countries: [
                { country: 'China' },
                { country: 'India' },
                { country: 'Japan' }
            ]
        },
        {
            continent: 'North America',
            countries: [
                { country: 'Canada' },
                { country: 'Mexico' },
                { country: 'USA' }
            ]
        },
        {
            continent: 'South America',
            countries: [
                { country: 'Brazil' },
                { country: 'Colombia' },
                { country: 'Argentina' }
            ]
        },
        {
            continent: 'Oceania',
            countries: [
                { country: 'Australia' },
                { country: 'New Zealand' },
                { country: 'Samoa' },
            ]
        },
        { continent: 'Antarctica' }
    ];

    //Menu fields definition
    public menuFields: FieldSettingsModel = {
        text: ['continent', 'country'],
        children: ['countries']
    };

    public created(): void {
        let insertItem: { [key: string]: Object }[] = [
            {
                continent: 'Europe',
                countries: [
                    { country: 'Finland' },
                    { country: 'Austria' }
                ]
            }
        ];
        //Add items before to 'Oceania'
        this.menuObj?.insertBefore(insertItem, 'Oceania', false);

        insertItem = [
            {
                continent: 'Africa',
                countries: [
                    { country: 'Nigeria' }
                ]
            }
        ];

        //Add items after to 'Asia'
        this.menuObj?.insertAfter(insertItem, 'Asia', false);

        //Remove items
        this.menuObj?.removeItems(['South America', 'Mexico'], false);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable or disable menu items

Menu items can be enabled or disabled using the enableItems method, which accepts a string[] of item identifiers and a boolean enable parameter. Disabled items appear grayed out and are non-interact able. Set enable to true to enable items and false to disable them.

In the following example, the Directory header item, Conferences, and Music submenu items are disabled.

Use the beforeOpen event to dynamically enable or disable submenu items by modifying the args.items array.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MenuModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, ViewChild } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent, MenuItemModel, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-angular-navigations';

enableRipple(true);

@Component({
imports: [ MenuModule, ButtonModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
        <div class="control-section">
            <button ejs-button (click)='btnClick()'>Enable all items</button>
            <div class="menu-section">
                <ejs-menu #menu [items]='menuItems' (beforeOpen)='beforeOpen($event)' (created)='created()'></ejs-menu>
            </div>
        </div>
        </div>`
})

export class AppComponent {
    @ViewChild('menu')
    public menuObj?: MenuComponent;

    //Menu items definition
    public menuItems: MenuItemModel[] = [
        {
            text: 'Events',
            items: [
                { text: 'Conferences' },
                { text: 'Music' },
                { text: 'Workshops' }
            ]
        },
        {
            text: 'Movies',
            items: [
                { text: 'Now Showing' },
                { text: 'Coming Soon' }
            ]
        },
        {
            text: 'Directory',
            items: [
                { text: 'Media Gallery' },
                { text: 'Newsletters' }
            ]
        },
        {
            text: 'Queries',
            items: [
                { text: 'Our Policy' },
                { text: 'Site Map' }
            ]
        },
        { text: 'Services' }
    ];

    public disableItems: string[] = ['Conferences', 'Music', 'Directory'];

    public beforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
        //Handling sub menu items
        for (let i: number = 0; i < args.items.length; i++) {
            if (this.disableItems.indexOf(args.items[i].text as string) > -1) {
                this.menuObj?.enableItems([args.items[i].text as string], false, false);
            }
        }
    }

    public created(): void {
        //Disable items
        this.menuObj?.enableItems(this.disableItems, false, false);
    }

    public btnClick(): void {
        //Enable items
        this.menuObj?.enableItems(this.disableItems, true, false);
        this.disableItems = [];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Hide or show menu items

Menu items can be shown or hidden using the showItems and hideItems methods.

In the following example, the Movies header item, Workshops, and Music submenu items are hidden.

Since the Menu initially supports hiding only header items, use the beforeOpen event to dynamically hide submenu items by updating args.items.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MenuModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, ViewChild } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent, MenuItemModel, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-angular-navigations';

enableRipple(true);

@Component({
imports: [ MenuModule, ButtonModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <div class="control-section">
            <button ejs-button (click)='btnClick()'>Show all items</button>
            <div class="menu-section">
                <ejs-menu #menu [items]='menuItems' (beforeOpen)='beforeOpen($event)' (created)='created()'></ejs-menu>
            </div>
        </div>
        </div>`
})

export class AppComponent {
    @ViewChild('menu')
    public menuObj?: MenuComponent;
    public menuItems: MenuItemModel[] = [
        {
            text: 'Events',
            items: [
                { text: 'Conferences' },
                { text: 'Music' },
                { text: 'Workshops' }
            ]
        },
        {
            text: 'Movies',
            items: [
                { text: 'Now Showing' },
                { text: 'Coming Soon' }
            ]
        },
        {
            text: 'Directory',
            items: [
                { text: 'Media Gallery' },
                { text: 'Newsletters' }
            ]
        },
        {
            text: 'Queries',
            items: [
                { text: 'Our Policy' },
                { text: 'Site Map' }
            ]
        },
        { text: 'Services' }
    ];

    public hiddenItems: string[] = ['Workshops', 'Music', 'Movies'];

    public beforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
        //Handling sub menu items
        for (let i: number = 0; i < args.items.length; i++) {
            if (this.hiddenItems.indexOf(args.items[i].text as string) > -1) {
                this.menuObj?.hideItems([args.items[i].text as string], false);
            }
        }
    }

    public created(): void {
        // Disable menu items
        this.menuObj?.hideItems(this.hiddenItems, false);
    }

    public btnClick(): void {
        // Show menu items
        this.menuObj?.showItems(this.hiddenItems, false);
        this.hiddenItems = [];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));