API компонента Combobox

Импорт

import-combobox.ts

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

NuiCombobox

Текстовое поле с подсказками по мере ввода.

Селектор: nui-combobox

NuiCombobox: Свойства
Имя	Тип	По умолчанию	Описание
`options`Input	`NuiOption<V>[]`		Варианты в виде объектов `NuiOption`.
`value`Двусторонний	`V \| null`	`null`	Выбранное значение или `null`. Работает и с формами.
`values`Двусторонний	`readonly V[]`	`[]`	Выбранные значения при `multiple`.
`multiple`Input	`boolean`	`false`	Позволяет выбрать несколько вариантов; они показываются чипами.
`create`Input	`(text: string) => V`		Создаёт значение из введённого текста. Список предлагает добавить текст, которого нет среди вариантов.
`filtering`Input	`boolean`	`true`	Фильтрует варианты по мере ввода. Отключите, если фильтрует сервер.
`loading`Input	`boolean`	`false`	Показывает строку загрузки, пока результаты не пришли.
`clearable`Input	`boolean`	`false`	Добавляет кнопку очистки значения и позволяет очищать его клавишей Esc.
`placeholder`Input	`string`	`''`	Текст в пустом поле.
`label`Input	`string`		Доступное имя, если у поля нет `<label>`.
`inputId`Input	`string`		Id текстового поля для `<label for>`.
`disabled`Input	`boolean`	`false`	Отключает поле.
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	Сравнивает значения-объекты: соответствуют ли они одному варианту.
`displayWith`Input	`(value: V) => string`	`String`	Текст для значения, которого нет среди вариантов, например заданного до их загрузки.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Рендерит только видимые строки: всегда, никогда или `auto` — свыше 200 строк.
`queryChange`Output	`string`		Передаёт текст по мере ввода — для поиска на сервере.
`openChange`Output	`boolean`		Срабатывает при открытии и закрытии списка.
`show`Метод	`() => void`		Открывает список.
`hide`Метод	`() => void`		Закрывает список.
`clear`Метод	`() => void`		Очищает значение и текст.
`focus`Метод	`(options?: FocusOptions) => void`		Переводит фокус на текстовое поле.

Все видимые и озвучиваемые тексты — тоже входные свойства, так что их можно перевести: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

Примените к ng-template внутри компонента, чтобы отрисовывать каждую строку самостоятельно. В контексте — вариант и его строка.

Селектор: ng-template[nuiOptionTemplate]

NuiOptionText

Выводит подпись варианта с выделенными совпадениями, его описание и путь — для собственных строк.

Селектор: [nuiOptionText]

NuiOptionText: Свойства
Имя	Тип	По умолчанию	Описание
`nuiOptionText`Input	`NuiOptionRow<V>`		Строка из контекста шаблона.