API del componente Combobox

Importación

import-combobox.ts

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

NuiCombobox

Un campo de texto que sugiere opciones mientras escribes.

Selector: nui-combobox

NuiCombobox: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`options`Input	`NuiOption<V>[]`		Las opciones, como objetos `NuiOption`.
`value`Bidireccional	`V \| null`	`null`	El valor elegido, o `null`. También funciona con formularios.
`values`Bidireccional	`readonly V[]`	`[]`	Los valores elegidos, con `multiple`.
`multiple`Input	`boolean`	`false`	Permite elegir varias opciones, que se muestran como chips.
`create`Input	`(text: string) => V`		Crea un valor a partir del texto escrito. La lista ofrece entonces añadir el texto que no sea una opción.
`filtering`Input	`boolean`	`true`	Filtra las opciones mientras escribes. Desactívalo cuando las filtre un servidor.
`loading`Input	`boolean`	`false`	Muestra una fila de carga mientras llegan los resultados.
`clearable`Input	`boolean`	`false`	Añade un botón que borra el valor y permite borrarlo con Esc.
`placeholder`Input	`string`	`''`	Texto que se muestra mientras el campo está vacío.
`label`Input	`string`		Nombre accesible, cuando ningún `<label>` da nombre al campo.
`inputId`Input	`string`		Id del campo de texto, para `<label for>`.
`disabled`Input	`boolean`	`false`	Desactiva el campo.
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	Indica si dos valores son la misma opción, para valores que son objetos.
`displayWith`Input	`(value: V) => string`	`String`	Texto para un valor que no está entre las opciones, como uno definido antes de que se carguen.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Renderiza solo las filas visibles: siempre, nunca, o `auto` con más de 200 filas.
`queryChange`Output	`string`		Emite el texto a medida que se escribe, para una búsqueda en el servidor.
`openChange`Output	`boolean`		Emite cuando la lista se abre o se cierra.
`show`Método	`() => void`		Abre la lista.
`hide`Método	`() => void`		Cierra la lista.
`clear`Método	`() => void`		Borra el valor y el texto.
`focus`Método	`(options?: FocusOptions) => void`		Pone el foco en el campo de texto.

Todos los textos que muestra o anuncia también son inputs, así que puedes traducirlos: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

Ponlo en un ng-template dentro del componente para dibujar tú cada fila. El contexto contiene la opción y su fila.

Selector: ng-template[nuiOptionTemplate]

NuiOptionText

Dibuja la etiqueta de una opción con las letras coincidentes resaltadas, su descripción y su ruta, para tus propias filas.

Selector: [nuiOptionText]

NuiOptionText: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`nuiOptionText`Input	`NuiOptionRow<V>`		La fila, del contexto de la plantilla.