CngxContextMenuFor

Directivev0.1.0WCAG AA

projects/ui/context-menu/context-menu-for.directive.ts

Import#

import { CngxContextMenuFor } from '@cngx/ui/context-menu'

Description#

Docks a CngxContextMenu onto a target element. Opens the panel at pointer coordinates on contextmenu (right-click) or Shift+F10, feeding the panel a per-open datum so one declaration serves many targets.

Three ways to obtain the datum T:

[cngxContextMenuData] - a fixed datum for this single target.
[cngxContextMenuResolve] - a resolver run against the contextmenu event, so a container (table, grid, treetable, virtualized list) keeps a single trigger instance and derives the row from event.target. The resolver wins when both are bound. A null resolver result leaves the native context menu untouched (no preventDefault, no open).
[cngxContextMenuKeyboardResolve] - the keyboard counterpart, run against the Shift+F10 keydown so a delegated container derives the row from the focused element (event.target). Without it a keyboard open commits [cngxContextMenuData] (or null in resolver-only mode).

A thin shell over createContextMenuTriggerCore (shared with CngxContextMenuTrigger): the core owns the preventDefault decision through its resolveOpen seam, so the veto lives in one place and this directive only feeds the resolver.

Many triggers may dock the same panel. Each open claims ownership on the panel, so only the opening trigger reports aria-expanded="true", forwards the panel's keydown into its core, and runs its dismiss binding - sibling triggers stay collapsed and inert for opens they did not perform.

<tr [cngxContextMenuFor]="menu" [cngxContextMenuData]="row" tabindex="0"></tr>
<cngx-context-menu #menu ariaLabel="Row actions">…</cngx-context-menu>

https://cngxjs.github.io/cngx/examples/#/ui/context-menu/grid/delegated-resolver https://cngxjs.github.io/cngx/examples/#/ui/context-menu/basic/static-items

Metadata#

Selector: [cngxContextMenuFor]
Export as: cngxContextMenuFor

Host#

Static attributes: [attr.aria-haspopup]"menu"
[attr.aria-expanded]isOpen()
Listeners: contextmenu → handleContextMenu keydown → handleKeydown

Index#

Inputs#

data#T | undefined

input()

Fixed datum handed to the panel for this single target.

default undefined, { alias: 'cngxContextMenuData' }

panel#CngxContextMenuPanel

Required

Panel this trigger opens. Typed to the CngxContextMenuPanel seam.

default { alias: 'cngxContextMenuFor' }

Instance Properties#

keyboardResolve#unknown

Readonly

Resolver run against the Shift+F10 keydown. event.target is the focused element inside this trigger's host, so a delegated container (focusable rows, roving grid cells) derives the row for keyboard users exactly like [cngxContextMenuResolve] does for pointer users. Return null to skip the open (the browser's own Shift+F10 behaviour stays untouched). Wins over [cngxContextMenuData] for keyboard opens.

input<((event: KeyboardEvent) => T | null) | undefined>(undefined, {
  alias: 'cngxContextMenuKeyboardResolve',
})

resolve#unknown

Readonly

Resolver run against the contextmenu event. Return the datum to open with, or null to let the native menu show. Wins over [cngxContextMenuData]. Keyboard opens (Shift+F10) carry no pointer event - they resolve via [cngxContextMenuKeyboardResolve], or fall back to the fixed datum.

input<((event: MouseEvent) => T | null) | undefined>(undefined, {
  alias: 'cngxContextMenuResolve',
})

Methods#

handleContextMenu#void

Protected

handleContextMenu(event: MouseEvent)

@parameventMouseEvent

handleKeydown#void

Protected

handleKeydown(event: KeyboardEvent)

@parameventKeyboardEvent

HostBindings#

Binding	Expression
`[attr.aria-haspopup]`	`"menu"`
`[attr.aria-expanded]`	`isOpen()`

HostListeners#

Event	Handler
`(contextmenu)`	`contextmenu()`
`(keydown)`	`keydown()`

CngxContextMenuFor

Import#

Description#

Related#

Metadata#

Host#

Index#

Properties

Methods

Inputs

Derived State

HostBindings

HostListeners

Inputs#

Instance Properties#

Methods#

HostBindings#

HostListeners#