Skip to main content
cngx-src documentation

CngxListboxTrigger

DirectivePrimaryv0.1.0WCAG AA

projects/common/interactive/listbox/listbox-trigger.directive.ts

Import#

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

Description#

Trigger atom for listbox dropdowns.

Pairs a focusable element (button) with a CngxListbox and a CngxPopover through explicit template references - no ancestor injection, consistent with the CngxSortHeader / CngxSortRef orthogonal composition pattern.

Implements the WAI-ARIA combobox-less listbox trigger keyboard model:

State Key Action
closed Enter / Space / ArrowDown open + highlight first enabled
closed ArrowUp open + highlight last enabled
open ArrowDown / ArrowUp / Home / End delegate to AD primitives
open Enter / Space activate; close if closeOnSelect()
any Escape close and restore focus to trigger

https://cngxjs.github.io/cngx/examples/#/common/interactive/listbox/trigger/select-dropdown

Metadata#

Host#

Relationships

Index#

Inputs#

closeOnSelect#boolean
input()

Whether activating an option closes the popover.

default true
Required

Listbox controlled by this trigger.

default { alias: 'cngxListboxTrigger' }
input()Required

Popover that wraps the listbox panel.

Outputs#

backspaceOnEmpty#void
output()

Fires when the user presses Backspace on an empty input. Only emitted when the host element is an <input> with a co-located CngxListboxSearch - the tag-input convention "Backspace on empty deletes the trailing chip" lives at the trigger, so consumers only wire one subscription to own the delete path. On non-input hosts (classic button triggers) the event never fires.

Methods#

handleKeydown#void
Protected
handleKeydown(event: KeyboardEvent)
@parameventKeyboardEvent

HostBindings#

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

HostListeners#

EventHandler
(keydown)keydown()