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

Импорт

import-select.ts

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

NuiSelect

Кнопка, которая открывает список вариантов.

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

NuiSelect: Свойства
Имя	Тип	По умолчанию	Описание
`options`Input	`NuiOption<V>[]`		Варианты в виде объектов `NuiOption`.
`value`Двусторонний	`V \| null`	`null`	Выбранное значение или `null`. Работает и с формами.
`values`Двусторонний	`readonly V[]`	`[]`	Выбранные значения при `multiple`.
`multiple`Input	`boolean`	`false`	Позволяет выбрать несколько вариантов. Пока вы выбираете, список остаётся открытым.
`selectAll`Input	`boolean`	`false`	При `multiple` добавляет кнопку, которая выбирает все варианты или снимает выбор.
`placeholder`Input	`string`	`'Select…'`	Текст, пока ничего не выбрано.
`label`Input	`string`		Доступное имя, если у кнопки нет `<label>`.
`triggerId`Input	`string`		Id кнопки для `<label for>`.
`disabled`Input	`boolean`	`false`	Отключает select.
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	Сравнивает значения-объекты: соответствуют ли они одному варианту.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Рендерит только видимые строки: всегда, никогда или `auto` — свыше 200 строк.
`openChange`Output	`boolean`		Срабатывает при открытии и закрытии списка.
`show`Метод	`() => void`		Открывает список.
`hide`Метод	`() => void`		Закрывает список.
`focus`Метод	`(options?: FocusOptions) => void`		Переводит фокус на кнопку.

Все видимые и озвучиваемые тексты — тоже входные свойства, так что их можно перевести: selectAllLabel clearAllLabel emptyLabel

NuiOption

Один вариант. Такие объекты принимают select, combobox и палитра команд.

NuiOption: Свойства
Имя	Тип	Описание
`value`Свойство	`V`	Значение, которое задаёт выбор варианта. Любого типа.
`label`Свойство	`string`	Видимый текст, по которому идёт поиск.
`description`Свойство	`string`	Второстепенный текст под подписью.
`group`Свойство	`string`	Варианты с одинаковой группой выводятся по порядку под её заголовком.
`keywords`Свойство	`string[]`	Дополнительные слова для поиска, например синонимы или коды.
`disabled`Свойство	`boolean`	Показывается, но выбрать его нельзя.
`children`Свойство	`NuiOption<V>[]`	Варианты уровнем ниже; они превращают список в дерево.

NuiOptionTemplate

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

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

NuiOptionText

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

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

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