Customize menu using events in Angular Menu component

12 Sep 20257 minutes to read

This section demonstrates how to customize the behavior of the Angular Menu component using events such as beforeOpen, beforeClose, onOpen, onClose, select, and created. These events allow dynamic modification of menu behavior, such as altering submenu content or handling item selection.

The following table summarizes the available events and their purposes:

Event	Event Argument	Purpose
beforeOpen	BeforeOpenCloseMenuEventArgs	Triggered before a submenu opens, allowing modification of content (cancelable with args.cancel = true).
beforeClose	BeforeOpenCloseMenuEventArgs	Triggered before a submenu closes, allowing cancellation with args.cancel = true.
onOpen	OpenCloseMenuEventArgs	Triggered after a submenu opens, useful for post-open adjustments.
onClose	OpenCloseMenuEventArgs	Triggered after a submenu closes, useful for cleanup tasks.
select	MenuEventArgs	Triggered when a menu item is selected, enabling custom navigation or actions.
created	Event	Triggered after the Menu is initialized, useful for setup tasks.

This example renders a menu with custom event handling for item selection.

app.component.ts

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 } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuItemModel, OpenCloseMenuEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs } 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">
    <div class="menu-section">
        <ejs-menu id='menu' [items]='menuItems' (beforeOpen)='beforeOpen($event)' (beforeClose)='beforeClose($event)' (onClose)='onClose($event)' (onOpen)='onOpen($event)' (select)='select($event)' (created)='onCreated()'></ejs-menu>
    </div>
    <div class="property-section">
        <table id="propertyTable" title="Event trace">
            <tbody>
                <th>Event trace:-</th>
                <tr>
                <td [innerHTML]="eventTrace"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <button id='clear' ejs-button cssClass='e-small' (click)='btnClick()'>Clear</button>
    </div>
    </div>`
})

export class AppComponent {
    public eventTrace: string = '';
    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 beforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
        this.updateEventLog(args);
    }

    public beforeClose(args: BeforeOpenCloseMenuEventArgs): void {
        this.updateEventLog(args);
    }

    public onClose(args: OpenCloseMenuEventArgs): void {
        this.updateEventLog(args);
    }

    public onOpen(args: OpenCloseMenuEventArgs): void {
        this.updateEventLog(args);
    }

    public select(args: MenuEventArgs): void {
        this.updateEventLog(args);
    }

    public onCreated(): void {
        this.updateEventLog({ name: 'Created' });
    }

    public updateEventLog(args: any): void {
        this.eventTrace = this.eventTrace + args.name + ' Event triggered. <br />'
    }

    public btnClick(): void {
        this.eventTrace = '';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));