Combobox API · Needless UI

Import

import-combobox.ts

import { NuiCombobox, type NuiOption } from '@needless-ui/angular/select';

NuiCombobox

A text field that suggests options as you type.

Selector: nui-combobox

NuiCombobox: Properties
Name	Type	Default	Description
`options`Input	`NuiOption<V>[]`		The options, as `NuiOption` objects.
`value`Two-way	`V \| null`	`null`	The chosen value, or `null`. Also works with forms.
`values`Two-way	`readonly V[]`	`[]`	The chosen values, with `multiple`.
`multiple`Input	`boolean`	`false`	Lets several options be chosen, shown as chips.
`create`Input	`(text: string) => V`		Makes a value from typed text. The list then offers to add text that isn’t an option.
`filtering`Input	`boolean`	`true`	Filters the options as you type. Turn it off when a server filters them.
`loading`Input	`boolean`	`false`	Shows a loading row while results are on their way.
`clearable`Input	`boolean`	`false`	Adds a button that clears the value, and lets Escape clear it.
`placeholder`Input	`string`	`''`	Text shown while the field is empty.
`label`Input	`string`		Accessible name, when no `<label>` names the field.
`inputId`Input	`string`		Id of the text field, for `<label for>`.
`disabled`Input	`boolean`	`false`	Disables the field.
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	Tells whether two values are the same option, for values that are objects.
`displayWith`Input	`(value: V) => string`	`String`	Text for a value that isn’t among the options, such as one set before they load.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Renders only the rows in view: always, never, or `auto` past 200 rows.
`queryChange`Output	`string`		Emits the text as it’s typed, for a server search.
`openChange`Output	`boolean`		Emits when the list opens or closes.
`show`Method	`() => void`		Opens the list.
`hide`Method	`() => void`		Closes the list.
`clear`Method	`() => void`		Clears the value and the text.
`focus`Method	`(options?: FocusOptions) => void`		Focuses the text field.

Every text it shows or announces is an input too, so you can translate it: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

Put it on an ng-template inside the component to draw each row yourself. The context holds the option and its row.

Selector: ng-template[nuiOptionTemplate]

NuiOptionText

Draws an option’s label with the matched letters marked, its description and its path, for your own rows.

Selector: [nuiOptionText]

NuiOptionText: Properties
Name	Type	Default	Description
`nuiOptionText`Input	`NuiOptionRow<V>`		The row, from the template context.