MenuTrigger - Angular

A trigger for a menu.

API

class MenuTrigger<V> {
  readonly element: HTMLElement;
  readonly textDirection: WritableSignal<Direction>;
  @Input() menu: InputSignal<Menu<V> | undefined>;
  readonly expanded: Signal<any>;
  readonly hasPopup: Signal<any>;
  readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() softDisabled: InputSignalWithTransform<boolean, unknown>;
  open(): void;
  close(): void;
}

element

HTMLElement

A reference to the host element.

textDirection

WritableSignal<Direction>

The directionality (LTR / RTL) context for the application (or a subtree of it).

expanded

Signal<any>

Whether the menu is expanded.

hasPopup

Signal<any>

Whether the menu trigger has a popup.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the menu trigger is disabled.

softDisabled

InputSignalWithTransform<boolean, unknown>

Whether the menu trigger is soft disabled.

open

void

Opens the menu focusing on the first menu item.

@returnsvoid

close

void

Closes the menu.

@returnsvoid

Description

A trigger for a menu.

The ngMenuTrigger directive is used to open and close menus. It can be applied to any interactive element (e.g., a button) to associate it with a ngMenu instance. It also supports linking to sub-menus when applied to a ngMenuItem.

<button ngMenuTrigger [menu]="myMenu">Open Menu</button>

<div ngMenu #myMenu="ngMenu">
  <div ngMenuItem>Item 1</div>
  <div ngMenuItem>Item 2</div>
</div>