CngxPopoverTrigger

DirectivePrimaryv0.1.0WCAG AA

projects/common/popover/popover-trigger.directive.ts

Import#

import { CngxPopoverTrigger } from '@cngx/common/popover'

Description#

ARIA wiring atom for elements that trigger a CngxPopover.

Sets aria-expanded, aria-controls, and aria-haspopup based on the referenced popover's state. Also sets anchor-name for CSS Anchor Positioning and registers the anchor element on the popover for fallback positioning.

Contains no event handlers - the consumer binds interactions directly:

<button [cngxPopoverTrigger]="pop" (click)="pop.toggle()">Menu</button>
<div cngxPopover #pop="cngxPopover" placement="bottom-start">…</div>

Focus restoration

Opt in with [restoreFocus]="true" to capture the active element when the popover opens and restore focus to it on close. Useful for menus, confirm panels, and dialogs that steal focus from the trigger.

https://cngxjs.github.io/cngx/examples/#/common/popover/click-popover https://cngxjs.github.io/cngx/examples/#/common/popover/controlled-open https://cngxjs.github.io/cngx/examples/#/common/popover/escape-mode https://cngxjs.github.io/cngx/examples/#/common/popover/placement-variants

Metadata#

Selector: [cngxPopoverTrigger]
Export as: cngxPopoverTrigger

Host#

Static attributes: [attr.aria-expanded]popoverRef().isVisible()
[attr.aria-controls]popoverRef().id()
[attr.aria-haspopup]haspopup()
Bound styles: anchor-name ← cssAnchorName

Relationships

Used by15

componentCngxActionMultiSelectMulti-value combobox with inline quick-create.

componentCngxActionSelectSingle-value autocomplete with inline quick-create.

componentCngxBreadcrumbOverflowDrop-in overflow menu for {@link CngxBreadcrumbBar}.

componentCngxBreadcrumbSiblingsPer-crumb lateral-navigation dropdown for a hand-composed breadcrumb trail.

componentCngxComboboxTag-input style multi-value combobox.

componentCngxMultiSelectMulti-select sibling of {@link CngxSelect}.

componentCngxPaginatorPageOfPagesPage-of-pages segment.

componentCngxPaginatorPagesThe numbered page row.

componentCngxPaginatorPageSizeItems-per-page segment.

componentCngxReorderableMultiSelectMulti-select with pointer-drag and keyboard reorder of selected values (modifier + arrow, Home/End).

componentCngxSelectNative-feeling single-select dropdown.

componentCngxSelectShellNative-feeling single-value dropdown with **declarative options** - consumers project `` / `` children and the shell…

componentCngxTabOverflowOpt-in overflow indicator for ``.

componentCngxTreeSelectTree-structured multi-select.

componentCngxTypeaheadSingle-value async autocomplete.

Index#

Inputs#

haspopupInput#PopoverHaspopup | 'none' | undefined

input()

ARIA haspopup override. When set, wins over the popover-supplied hint (popoverRef().haspopup(), populated by composers such as CngxPopoverPanel). Final fallback when neither is set is 'true'. Accepts the W3C-spec values for supported popup-container roles: 'dialog', 'listbox', 'menu', 'tree', or 'true'.

Pass 'none' to emit no aria-haspopup at all - correct for a disclosure whose popup is not one of the recognised widget types (e.g. a list of links), where aria-expanded alone describes the trigger. 'none' wins over the composer hint, so it also cancels a CngxPopoverPanel's 'dialog' default.

default undefined, { alias: 'haspopup', }

popoverRef#CngxPopover

input()Required

Explicit reference to the popover this trigger controls.

default { alias: 'cngxPopoverTrigger', }

restoreFocus#

input()

When true, captures document.activeElement the moment the popover transitions to a visible state and restores focus to that element when the popover closes. Defaults to false so the trigger stays a passive ARIA atom; opt in for menus, confirm panels, and dialogs that move focus away from the trigger.

default false

HostBindings#

Binding	Expression
`[attr.aria-expanded]`	`popoverRef().isVisible()`
`[attr.aria-controls]`	`popoverRef().id()`
`[attr.aria-haspopup]`	`haspopup()`
`[style.anchor-name]`	`cssAnchorName()`

CngxPopoverTrigger

Import#

Description#

Focus restoration#

Related#