MenuItem - Angular

An item in a Menu.

API

class MenuItem<V> {
  readonly element: HTMLElement;
  readonly @Input() id: InputSignal<any>;
  readonly @Input() value: InputSignal<V>;
  readonly @Input() disabled: InputSignal<boolean>;
  readonly @Input() @Output('searchTermChange') searchTerm: ModelSignal<string>;
  readonly parent: Menu<V> | MenuBar<V> | null;
  readonly @Input() submenu: InputSignal<Menu<V> | undefined>;
  readonly active: Signal<any>;
  readonly expanded: Signal<any>;
  readonly hasPopup: Signal<any>;
  open(): void;
  close(): void;
}

element

HTMLElement

A reference to the host element.

id

InputSignal<any>

The unique ID of the menu item.

value

InputSignal<V>

The value of the menu item, used as the default aria-label

disabled

InputSignal<boolean>

Whether the menu item is disabled.

searchTerm

ModelSignal<string>

The search term associated with the menu item.

parent

Menu<V> | MenuBar<V> | null

A reference to the parent menu or menubar.

submenu

InputSignal<Menu<V> | undefined>

The submenu associated with the menu item.

active

Signal<any>

Whether the menu item is active.

expanded

Signal<any>

Whether the menu is expanded.

hasPopup

Signal<any>

Whether the menu item has a popup.

open

void

Opens the submenu focusing on the first menu item.

@returnsvoid

close

void

Closes the submenu.

@returnsvoid

Description

An item in a Menu.

ngMenuItem directives can be used in ngMenu and ngMenuBar to represent a choice or action a user can take. They can also act as triggers for sub-menus.

<div ngMenu (itemSelected)="doAction()">
  <div ngMenuItem >Action Item</div>
  <div ngMenuItem [submenu]="anotherMenu">Submenu Trigger</div>
</div>