CngxPopoverTrigger
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 restore focus on close to the
element that was focused before the popover opened (the popover
snapshots it synchronously in show(), so content autofocus cannot
displace the restore target). Useful for menus, confirm panels, and
dialogs that steal focus from the trigger.
Metadata#
Host#
Relationships
Used by15
Index#
Inputs#
PopoverHaspopup | 'none' | undefinedARIA 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.
undefined, { alias: 'haspopup', }CngxPopoverExplicit reference to the popover this trigger controls.
{ alias: 'cngxPopoverTrigger', }When true, remembers the popover's pre-open focus target (the
popover snapshots document.activeElement synchronously inside
show(), before content autofocus can land in the panel) and
restores focus to it 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.
falseHostBindings#
| Binding | Expression |
|---|---|
[attr.aria-expanded] | popoverRef().isVisible() |
[attr.aria-controls] | popoverRef().id() |
[attr.aria-haspopup] | haspopup() |
[style.anchor-name] | cssAnchorName() |