CngxMenuItemSubmenu
projects/common/interactive/menu/menu-item-submenu.directive.ts
Import#
import { CngxMenuItemSubmenu } from '@cngx/common/interactive'
Description#
Companion directive applied to a [cngxMenuItem] that opens a nested
submenu. The directive itself does NOT render role="menuitem" - that
stays on CngxMenuItem. Adds aria-haspopup="menu" and reactive
aria-expanded, registers itself with the surrounding menu as a
submenu source so the menu trigger can drive arrow-right / arrow-left
focus-stack semantics.
Two inputs:
cngxMenuItemSubmenu: the popover wrapping the submenu.submenuMenu: the innerCngxMenu(or anyCngxMenuHost) the trigger transfers focus to when the submenu opens.
The submenu's <div cngxPopover> MUST set [exclusive]="false" so that
opening it does not light-dismiss the parent popover. This is the only
extra wiring the consumer needs beyond the two inputs.
Metadata#
Host#
Providers#
CNGX_MENU_SUBMENU_ITEM- useExisting
CngxMenuItemSubmenu
Relationships
Depends on1
Index#
Inputs
Derived State
HostListeners
Inputs#
PopoverControllerPopover wrapping the submenu. Required.
{ alias: 'cngxMenuItemSubmenu' }Methods#
Accessors#
Effective id used by CngxMenuTrigger.submenuItems().find(s => s.id === activeId). When applied alongside [cngxMenuItem] the directive
mirrors the sibling's id so the trigger's lookup matches the AD's
activeId. When applied alone (no sibling), falls back to a fresh
nextUid - the AD will never highlight this element so the trigger
lookup is moot, but the host element still receives a valid id.
CngxMenuHostHostBindings#
| Binding | Expression |
|---|---|
[id] | id |
[attr.aria-haspopup] | "menu" |
[attr.aria-expanded] | isOpen() |
[style.anchor-name] | cssAnchorName() |
HostListeners#
| Event | Handler |
|---|---|
(pointerenter) | pointerenter() |
(pointerleave) | pointerleave() |