API: Primitives

ComboboxDirective

Directive reference for ComboboxDirective with the selector [qzCombobox].

Overview

Kind: Directive
Export as: qzCombobox
Source: packages/primitives/src/combobox/combobox.directive.ts:53

Selector

[qzCombobox]

Inputs

Input	Type	Default	Description
`content`	`TemplateRef<unknown> \| null`	`null`
`options`	`readonly T[] \| null`	`null`
`disabled`	`unknown`	`false`	Transform `booleanAttribute`; reads as `boolean`.
`loading`	`unknown`	`false`	Transform `booleanAttribute`; reads as `boolean`.
`multiple`	`unknown`	`false`	Multiple selection: toggles options into `values`; the input stays a pure query. Transform `booleanAttribute`; reads as `boolean`.
`allowDeselect`	`unknown`	`false`	Single mode: choosing the selected option again clears the selection. Transform `booleanAttribute`; reads as `boolean`.
`placement`	`OverlayPlacement`	`DEFAULT_COMBOBOX_CONFIG.placement`
`offset`	`number`	`DEFAULT_COMBOBOX_CONFIG.offset`
`flip`	`unknown`	`DEFAULT_COMBOBOX_CONFIG.flip`	Transform `booleanAttribute`; reads as `boolean`.
`flipAxis`	`OverlayFlipAxis`	`DEFAULT_COMBOBOX_CONFIG.flipAxis`
`matchAnchorWidth`	`unknown`	`DEFAULT_COMBOBOX_CONFIG.matchAnchorWidth`	Transform `booleanAttribute`; reads as `boolean`.
`autocomplete`	`ComboboxAutocomplete`	`DEFAULT_COMBOBOX_CONFIG.autocomplete`
`openOnFocus`	`unknown`	`DEFAULT_COMBOBOX_CONFIG.openOnFocus`	Transform `booleanAttribute`; reads as `boolean`.
`openOnTyping`	`unknown`	`DEFAULT_COMBOBOX_CONFIG.openOnTyping`	Transform `booleanAttribute`; reads as `boolean`.
`closeOnSelect`	`boolean \| undefined`	`undefined`	Defaults to `true` in single mode and `false` when `multiple` is set.
`closeOnEscape`	`unknown`	`DEFAULT_COMBOBOX_CONFIG.closeOnEscape`	Transform `booleanAttribute`; reads as `boolean`.
`closeOnOutsidePointer`	`unknown`	`DEFAULT_COMBOBOX_CONFIG.closeOnOutsidePointer`	Transform `booleanAttribute`; reads as `boolean`.
`closeOnFocusOutside`	`unknown`	`DEFAULT_COMBOBOX_CONFIG.closeOnFocusOutside`	Transform `booleanAttribute`; reads as `boolean`.
`closeOnScroll`	`unknown`	`DEFAULT_COMBOBOX_CONFIG.closeOnScroll`	Transform `booleanAttribute`; reads as `boolean`.
`allowFreeform`	`unknown`	`DEFAULT_COMBOBOX_CONFIG.allowFreeform`	Transform `booleanAttribute`; reads as `boolean`.
`resetActiveOnClose`	`unknown`	`DEFAULT_COMBOBOX_CONFIG.resetActiveOnClose`	Transform `booleanAttribute`; reads as `boolean`.
`filter`	`ComboboxFilter<T> \| null`	`defaultComboboxFilter`
`displayWith`	`ComboboxDisplayWith<T>`	`defaultComboboxDisplayWith`
`compareWith`	`ComboboxCompareWith<T>`	`Object.is`
`config`	`Partial<ComboboxConfig<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. In `multiple` mode use `values`.
`values`	`readonly T[]`	`[]`	`valuesChange`	Selected values in `multiple` mode (controlled: write a new array to change the selection).
`inputValue`	`string`	`''`	`inputValueChange`	The text in the input: a query, distinct from the committed selection.
`open`	`boolean`	`false`	`openChange`

Outputs

Output	Payload	Description
`opened`	`void`
`closed`	`void`
`selected`	`T \| null`
`inputValueChangeCommitted`	`string`
`valueChangeCommitted`	`T \| null`	Single mode: fires when the committed value changes through a user action (option chosen, deselected, freeform committed, selection cleared by editing the text). Never for typing that does not change the selection and never for programmatic writes.
`valuesChangeCommitted`	`readonly T[]`	Multiple mode: fires once per user toggle with the new array. Never for programmatic writes.
`queryChanged`	`string`	Fires with the new query after user typing (not during IME composition) or a query reset.
`touched`	`void`	Fires when focus leaves the control.

Properties

Name	Type	Description
`readonly activeId`	`Signal<string>`
`readonly activeOption`	`Signal<ComboboxOptionDirective<T> & CollectionItem>`
`readonly isDisabled`	`Signal<boolean>`	Effective disabled state: the `disabled` input OR a disabled Angular Forms control.
`readonly selectedValues`	`Signal<readonly T[]>`
`readonly isOpen`	`Signal<boolean>`
`readonly panelId`	`Signal<string \| null>`
`readonly filteredOptions`	`Signal<readonly T[]>`
`readonly empty`	`Signal<boolean>`
`readonly isComposing`	`Signal<boolean>`
`readonly status`	`Signal<"loading" \| "empty" \| "results">`	`loading` while the consumer fetches, `empty` with no options to show, otherwise `results`.

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`

onInputBlur

onInputBlur(): void

setContentTemplate

setContentTemplate(template: TemplateRef<unknown> | null): void

Parameter	Type	Optional	Description
`template`	`TemplateRef<unknown> \| null`

setInputElement

setInputElement(element: HTMLInputElement | null): void

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

setTriggerElement

setTriggerElement(element: HTMLElement | null): void

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

register

register(option: ComboboxOptionDirective<T>): void

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

unregister

unregister(option: ComboboxOptionDirective<T>): void

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

setActive

setActive(id: string | null): void

Parameter	Type	Optional	Description
`id`	`string \| null`

isSelected

isSelected(option: ComboboxOptionDirective<T>): boolean

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

displayOption

displayOption(value: T): string

Parameter	Type	Optional	Description
`value`	`T`

handleInput

handleInput(value: string, composing?: boolean): void

User typed. While an IME composition is active the query is neither filtered, committed nor rewritten (the browser owns the input text); it is applied once on compositionend.

Parameter	Type	Optional	Description
`value`	`string`
`composing`	`boolean`	Yes

handleFocus

handleFocus(): void

handleKeydown

handleKeydown(event: KeyboardEvent): void

Parameter	Type	Optional	Description
`event`	`KeyboardEvent`

startComposition

startComposition(): void

endComposition

endComposition(value: string): void

Parameter	Type	Optional	Description
`value`	`string`

openPopup

openPopup(_reason?: ComboboxOpenReason, options?: { activate?: "first" | "last"; }): void

Parameter	Type	Optional	Description
`_reason`	`ComboboxOpenReason`	Yes
`options`	`{ activate?: 'first' \| 'last' }`	Yes

closePopup

closePopup(reason?: ComboboxCloseReason): void

Parameter	Type	Optional	Description
`reason`	`ComboboxCloseReason`	Yes

togglePopup

togglePopup(): void

selectActive

selectActive(): void

selectOption

selectOption(option: ComboboxOptionDirective<T>): void

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

commitFreeformValue

commitFreeformValue(): void