A list of menu items.
API
class Menu<V> { readonly element: HTMLElement; readonly textDirection: WritableSignal<Direction>; readonly @Input() id: InputSignal<any>; readonly @Input() wrap: InputSignalWithTransform<boolean, unknown>; readonly @Input() typeaheadDelay: InputSignal<number>; readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>; readonly parent: WritableSignal<MenuTrigger<V> | MenuItem<V> | undefined>; readonly visible: Signal<boolean>; readonly tabIndex: Signal<0 | -1>; @Output() onSelect: OutputEmitterRef<V>; readonly @Input() expansionDelay: InputSignal<number>; close(): void;}
element
HTMLElementA reference to the host element.
textDirection
WritableSignal<Direction>The directionality (LTR / RTL) context for the application (or a subtree of it).
id
InputSignal<any>The unique ID of the menu.
wrap
InputSignalWithTransform<boolean, unknown>Whether the menu should wrap its items.
typeaheadDelay
InputSignal<number>The delay in milliseconds before the typeahead buffer is cleared.
disabled
InputSignalWithTransform<boolean, unknown>Whether the menu is disabled.
parent
WritableSignal<MenuTrigger<V> | MenuItem<V> | undefined>A reference to the parent menu item or menu trigger.
visible
Signal<boolean>Whether the menu is visible.
tabIndex
Signal<0 | -1>The tab index of the menu.
onSelect
OutputEmitterRef<V>A callback function triggered when a menu item is selected.
expansionDelay
InputSignal<number>The delay in milliseconds before expanding sub-menus on hover.
close
voidCloses the menu.
@returns
voidDescription
A list of menu items.
A ngMenu is used to offer a list of menu item choices to users. Menus can be nested
within other menus to create sub-menus. It works in conjunction with ngMenuTrigger
and ngMenuItem directives.
<button ngMenuTrigger [menu]="myMenu">Options</button><div ngMenu #myMenu="ngMenu"> <div ngMenuItem>Star</div> <div ngMenuItem>Edit</div> <div ngMenuItem [submenu]="subMenu">More</div></div><div ngMenu #subMenu="ngMenu"> <div ngMenuItem>Sub Item 1</div> <div ngMenuItem>Sub Item 2</div></div>
Jump to details