Select API · Needless UI

Import

import-select.ts

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

A button that opens a list of options.

NuiSelect: 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. The list stays open while you pick.
`selectAll`Input	`boolean`	`false`	With `multiple`, adds a button that picks or clears every option.
`placeholder`Input	`string`	`'Select…'`	Text shown while nothing is chosen.
`label`Input	`string`		Accessible name, when no `<label>` names the button.
`triggerId`Input	`string`		Id of the button, for `<label for>`.
`disabled`Input	`boolean`	`false`	Disables the select.
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	Tells whether two values are the same option, for values that are objects.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Renders only the rows in view: always, never, or `auto` past 200 rows.
`openChange`Output	`boolean`		Emits when the list opens or closes.
`show`Method	`() => void`		Opens the list.
`hide`Method	`() => void`		Closes the list.
`focus`Method	`(options?: FocusOptions) => void`		Focuses the button.

Every text it shows or announces is an input too, so you can translate it: selectAllLabel clearAllLabel emptyLabel

One option. The select, the combobox and the command palette all take these.

NuiOption: Properties
Name	Type	Description
`value`Property	`V`	What choosing it sets. Any type.
`label`Property	`string`	The text shown and searched.
`description`Property	`string`	Secondary text under the label.
`group`Property	`string`	Options with the same group are listed under that heading, in order.
`keywords`Property	`string[]`	More words the search matches, such as synonyms or codes.
`disabled`Property	`boolean`	Shown, but it can’t be chosen.
`children`Property	`NuiOption<V>[]`	Options one level down, which make the list a tree.

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

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

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