CngxContextMenuItem
projects/ui/context-menu/context-menu-item.component.ts
Import#
import { CngxContextMenuItem } from '@cngx/ui/context-menu'
Description#
A single actionable context-menu item. Thin shell over CngxMenuItem: the
brain owns role="menuitem", the active-descendant registration, the
keyboard/pointer activation and the disabled semantics. Dual selector, so it
works both as an element and as an attribute on a native <button> (the
button[mat-menu-item] precedent).
Emits select when this item is activated by click or Enter/Space. Give
each item a distinct [value] (forwarded to the brain) so pointer
activation targets the right row - matching the base CngxMenuItem
convention; a value-less item still works when it is the only item.
Submenu
Bind [submenu] to a sibling <cngx-context-menu> to open a nested menu.
The CngxMenuItemSubmenu brain (a host directive here) is wired internally
through CNGX_MENU_SUBMENU_WIRING, so the consumer needs no [exclusive]
handgrip and no popover plumbing - just the sibling reference. The nested
panel opens non-exclusively (the parent stays open) and inherits the parent
panel's row context.
<cngx-context-menu-item value="copy" kbd="⌘C" (select)="copy()">Copy</cngx-context-menu-item>
<button cngxContextMenuItem value="delete" [disabled]="locked()" (select)="remove()">Delete</button>
<cngx-context-menu-item [submenu]="exportMenu">Export</cngx-context-menu-item>
<cngx-context-menu #exportMenu ariaLabel="Export as">
<cngx-context-menu-item (select)="export('pdf')">PDF</cngx-context-menu-item>
</cngx-context-menu>Metadata#
Providers#
CNGX_MENU_SUBMENU_WIRING- useExisting
CngxContextMenuItem
Relationships
Index#
Inputs#
Leading glyph shorthand rendered in the icon slot (decorative,
aria-hidden). A convenience for single-character icons; suppressed when
the consumer projects a richer [cngxMenuItemIcon] marker (SVG / icon
component), which wins.
Outputs#
Instance Properties#
unknownA consumer-projected [cngxMenuItemIcon] marker, when present. Gates the
string [icon] shorthand off so the projected icon is the only one drawn.
contentChild(CngxMenuItemIcon)Default visuals for CngxContextMenuItem and the checkbox / radio shells
that share this stylesheet. The item brains are host directives, so the
base [cngxMenuItem] attribute rules in cngx-menu.css never reach these
hosts - the row geometry (padding, gap, radius, cursor, tap-target floor)
is painted here, while the slot layout (.cngx-menu-item__label, __icon,
__kbd) and the highlighted / disabled state painting is adopted from the
base skin via the classes the brains stamp. The checked-indicator glyph is
likewise attribute-keyed in the base skin, so the organism re-draws it
keyed on the role the brain sets.
Inheritance
--cngx-context-menu-item-caret-color->--cngx-color-text-muted--cngx-context-menu-item-check-color->--cngx-color-primary
Pair with
@cngx/themes/material/context-menu-theme- Material 3 palette