Skip to main content
cngx-src documentation

CngxContextMenuTrigger

DirectivePrimaryv0.1.0WCAG AA

projects/common/interactive/menu/context-menu-trigger.directive.ts

Import#

import { CngxContextMenuTrigger } from '@cngx/common/interactive'

Description#

Opens a CngxMenu-bearing popover at pointer coordinates in response to contextmenu (right-click) or Shift+F10 (keyboard equivalent).

Two inputs:

  • cngxContextMenuTrigger: the CngxMenu (or any CngxMenuHost) the popover wraps.
  • popover: the CngxPopover panel containing the menu. Must be marked [exclusive]="true" (default) so that opening this menu light-dismisses any other popover.

Anchoring uses a transient zero-size DOM element positioned at the pointer coords, set on the popover's anchorElement signal - virtual getBoundingClientRect objects are not yet supported as anchors, so the transient div is the workaround.

Touch-driven opening via long-press is deliberately out of scope for the initial commit; consumers can compose CngxLongPress against the same popover anchor pattern as a follow-up.

Dismissal

Four sources close the menu by default: Escape, pointerdown outside both the popover and the trigger host, window blur, and document pointercancel. Window scroll is opt-in via withDismissOnScroll. Touch users get backdrop dismissal through the same pointerdown listener - no ESC dependency. The dismissal source that fired most recently is readable through lastDismissSource.

Override individual sources at app root with withDismissOnOutsideClick, withDismissOnScroll, withDismissOnBlur, or swap the whole handler via CNGX_MENU_DISMISS_HANDLER_FACTORY.

https://cngxjs.github.io/cngx/examples/#/common/interactive/context-menu/right-click-target-zone

Metadata#

Host#

Index#

Inputs#

input()Required

Popover that wraps the menu panel.

Instance Properties#

lastDismissSource#unknown
Readonly

The dismissal source that closed the menu most recently. null before the first close. Surface for demos, telemetry, and audit sinks - reads which path fired without re-installing listeners.

this.dismissBinding.lastSource

Methods#

handleContextMenu#void
Protected
handleContextMenu(event: MouseEvent)
@parameventMouseEvent
handleKeydown#void
Protected
handleKeydown(event: KeyboardEvent)
@parameventKeyboardEvent

HostBindings#

BindingExpression
[attr.aria-haspopup]"menu"
[attr.aria-expanded]isOpen()

HostListeners#

EventHandler
(contextmenu)contextmenu()
(keydown)keydown()