API: Primitives

SelectDirective

Directive reference for SelectDirective with the selector [qzSelect].

Overview

Kind: Directive
Export as: qzSelect
Source: packages/primitives/src/select/select.directive.ts:46

Selector

[qzSelect]

Inputs

Input	Type	Default	Description
`multiple`	`unknown`	`false`	Enables multiple selection: `values` is used instead of `value` and toggles keep the popup open. Transform `booleanAttribute`; reads as `boolean`.
`closeOnSelect`	`boolean \| undefined`	`undefined`	Whether a user selection closes the popup. Defaults to `true` in single mode and `false` when `multiple` is set.
`content`	`TemplateRef<unknown> \| null`	`null`
`disabled`	`unknown`	`false`	Transform `booleanAttribute`; reads as `boolean`.
`placement`	`OverlayPlacement`	`DEFAULT_SELECT_CONFIG.placement`
`offset`	`number`	`DEFAULT_SELECT_CONFIG.offset`
`flip`	`unknown`	`DEFAULT_SELECT_CONFIG.flip`	Transform `booleanAttribute`; reads as `boolean`.
`flipAxis`	`OverlayFlipAxis`	`DEFAULT_SELECT_CONFIG.flipAxis`
`matchAnchorWidth`	`unknown`	`DEFAULT_SELECT_CONFIG.matchAnchorWidth`	Transform `booleanAttribute`; reads as `boolean`.
`closeOnEscape`	`unknown`	`DEFAULT_SELECT_CONFIG.closeOnEscape`	Transform `booleanAttribute`; reads as `boolean`.
`closeOnOutsidePointer`	`unknown`	`DEFAULT_SELECT_CONFIG.closeOnOutsidePointer`	Transform `booleanAttribute`; reads as `boolean`.
`closeOnFocusOutside`	`unknown`	`DEFAULT_SELECT_CONFIG.closeOnFocusOutside`	Transform `booleanAttribute`; reads as `boolean`.
`closeOnScroll`	`unknown`	`DEFAULT_SELECT_CONFIG.closeOnScroll`	Transform `booleanAttribute`; reads as `boolean`.
`displayWith`	`(value: T) => string`	`DEFAULT_SELECT_CONFIG.displayWith`
`compareWith`	`(a: T, b: T) => boolean`	`DEFAULT_SELECT_CONFIG.compareWith`
`config`	`Partial<SelectConfig<T>>`	`{}`

Models

Two-way bindings: each model is an input and emits the matching change output.

Model	Type	Default	Change output	Description
`value`	`T \| null`	`null`	`valueChange`	Selected value in single mode. Ignored while `multiple` is set.
`values`	`readonly T[]`	`[]`	`valuesChange`	Selected values in `multiple` mode (controlled: write a new array to change the selection).
`open`	`boolean`	`false`	`openChange`

Outputs

Output	Payload	Description
`opened`	`void`
`closed`	`void`
`selected`	`T`	Fires with the option value on every user selection (in `multiple` mode: every toggle).
`valueChangeCommitted`	`T`	Single mode: fires once per user selection that changed the value; never for programmatic writes.
`valuesChangeCommitted`	`readonly T[]`	Multiple mode: fires once per user toggle with the new array; never for programmatic writes.
`touched`	`void`	Fires when focus leaves the control (trigger blur with the popup closed, or a close that does not return focus to the trigger).

Properties

Name	Type	Description
`readonly isDisabled`	`Signal<boolean>`	Effective disabled state: the `disabled` input OR a disabled Angular Forms control.
`readonly activeId`	`Signal<string>`
`readonly activeOption`	`Signal<SelectOptionDirective<T> & CollectionItem>`
`readonly isOpen`	`Signal<boolean>`
`readonly panelId`	`Signal<string \| null>`
`readonly selectedValues`	`Signal<readonly T[]>`	Currently selected values as an array in both modes (derived from `value` / `values`).
`readonly isEmpty`	`Signal<boolean>`	True when nothing is selected: the trigger should show its placeholder.
`readonly selectedOption`	`Signal<(SelectOptionDirective<T> & CollectionItem) \| null>`	First registered (rendered) selected option, in DOM order.
`readonly selectedLabels`	`Signal<string[]>`	Display labels of the selected values. Derived from the value through `displayWith`, never from registered options, so a value whose option is not rendered yet keeps its label.
`readonly selectedLabel`	`Signal<string>`	`selectedLabels` joined with `,` (empty string when nothing is selected).

Public methods

writeFormValue

writeFormValue(value: unknown): void

Adapter hook for @quartz-headless/primitives/forms (writeValue); silent, never emits.

Parameter	Type	Optional	Description
`value`	`unknown`

setFormDisabled

setFormDisabled(disabled: boolean): void

Adapter hook for @quartz-headless/primitives/forms (setDisabledState).

Parameter	Type	Optional	Description
`disabled`	`boolean`

nameListbox

nameListbox(listbox: HTMLElement): void

Gives an unlabelled popup its accessible name from the trigger: the trigger's aria-label or aria-labelledby when present, otherwise a reference to the trigger itself. A listbox the consumer labelled (aria-label / aria-labelledby, static or bound) is left alone. Attributes are read as they are when the popup opens, so [attr.aria-label] bindings work.

Parameter	Type	Optional	Description
`listbox`	`HTMLElement`

onTriggerBlur

onTriggerBlur(): void

setTriggerElement

setTriggerElement(element: HTMLElement | null): void

Parameter	Type	Optional	Description
`element`	`HTMLElement \| null`

setListboxElement

setListboxElement(element: HTMLElement | null): void

Parameter	Type	Optional	Description
`element`	`HTMLElement \| null`

register

register(option: SelectOptionDirective<T>): void

Parameter	Type	Optional	Description
`option`	`SelectOptionDirective<T>`

unregister

unregister(option: SelectOptionDirective<T>): void

Parameter	Type	Optional	Description
`option`	`SelectOptionDirective<T>`

activeTabIndex

activeTabIndex(id: string): 0 | -1

Parameter	Type	Optional	Description
`id`	`string`

setActive

setActive(option: SelectOptionDirective<T>, options?: { focus?: boolean; }): void

Parameter	Type	Optional	Description
`option`	`SelectOptionDirective<T>`
`options`	`{ focus?: boolean }`	Yes

isSelected

isSelected(option: SelectOptionDirective<T>): boolean

Parameter	Type	Optional	Description
`option`	`SelectOptionDirective<T>`

openPopup

openPopup(reason: SelectOpenReason, options?: { activate?: "selected" | "first" | "last"; }): void

Parameter	Type	Optional	Description
`reason`	`SelectOpenReason`
`options`	`{ activate?: 'selected' \| 'first' \| 'last' }`	Yes

closePopup

closePopup(reason: SelectCloseReason, restoreFocus?: boolean): void

Parameter	Type	Optional	Description
`reason`	`SelectCloseReason`
`restoreFocus`	`boolean`	Yes

selectOption

selectOption(option: SelectOptionDirective<T>): void

Parameter	Type	Optional	Description
`option`	`SelectOptionDirective<T>`

handleTriggerKeydown

handleTriggerKeydown(event: KeyboardEvent): void

Parameter	Type	Optional	Description
`event`	`KeyboardEvent`

handleListboxKeydown

handleListboxKeydown(event: KeyboardEvent): void

Parameter	Type	Optional	Description
`event`	`KeyboardEvent`