CngxContextMenu
projects/ui/context-menu/context-menu.component.ts
Import#
import { CngxContextMenu } from '@cngx/ui/context-menu'
Description#
Declarative context-menu panel. Stacks CngxPopover (the top-layer popup
surface) and CngxMenu (the role="menu" keyboard + ARIA brain) as host
directives on its own element, so projected items and the lazy content
template resolve CngxActiveDescendant / CNGX_MENU_HOST against the panel
host's injector chain. Pair it with [cngxContextMenuFor] on a target.
The brains live on the host - not inside an inner [cngxMenu] element -
because Angular resolves DI for projected and template content at the
declaration site, not the projection site; an inner menu directive would
be invisible to items rendered through <ng-content> or the content slot.
Construction mirrors CngxPopoverPanel.
context() is derived, never synced: it reads the trigger's per-open datum
while the popover is visible and null once it closes - no manual reset on
dismiss (Pillar 1).
Static menu
<div [cngxContextMenuFor]="menu">Right-click me</div>
<cngx-context-menu #menu ariaLabel="Actions">
<cngx-context-menu-item (select)="copy()">Copy</cngx-context-menu-item>
<cngx-context-menu-item (select)="paste()">Paste</cngx-context-menu-item>
</cngx-context-menu>Per-row content
<cngx-context-menu #menu ariaLabel="Row actions">
<ng-template cngxContextMenuContent let-row>
<cngx-context-menu-item (select)="edit(row)">Edit {{ row.name }}</cngx-context-menu-item>
</ng-template>
</cngx-context-menu>Metadata#
Host#
Providers#
CNGX_CONTEXT_MENU_PANEL- useExisting
CngxContextMenu
Dependencies#
Relationships
Default visuals for CngxContextMenu. The organism stacks CngxPopover
and CngxMenu as host directives, so the base menu-family skin's
container rules ([cngxMenu], cngx-menu.css) never reach this host -
a host directive applies behaviour, not its selector attribute. The
container therefore paints its own popup surface here (the chrome a
CngxPopoverPanel would otherwise supply), while the item slot and
state painting (.cngx-menu-item__label, .cngx-menu-item--highlighted,
...) is adopted from the base skin via the classes the brains stamp
programmatically. The --cngx-context-menu-* family carries the surface
chrome; spacing derives from --cngx-space-* so a root [data-density]
compacts the menu.
Slots
- projected
cngx-context-menu-item/-dividerrows, or a lazyng-template[cngxContextMenuContent]outlet cngx-context-menu-divider- hairline separator painted here (the base[cngxMenuSeparator]attribute rule does not reach the shell)
Inheritance
Surface tokens delegate to the foundation so a brand or dark-mode swap
cascades through one :root pass - no per-component dark 4-block needed:
--cngx-context-menu-surface->--cngx-color-surface--cngx-context-menu-color->--cngx-color-text--cngx-context-menu-border->--cngx-color-border--cngx-context-menu-shadow->--cngx-shadow-md--cngx-context-menu-separator-color->--cngx-color-border
Forced colors
The separator is a 1px background hairline that flattens to Canvas under
WHCM; an unlayered forced-colors rule re-draws it with CanvasText ink.
Pair with
@cngx/themes/material/context-menu-theme- Material 3 surface