API du composant Combobox

Import

import-combobox.ts

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

NuiCombobox

Un champ de texte qui suggère des options pendant la saisie.

Sélecteur: nui-combobox

NuiCombobox: Propriétés
Nom	Type	Par défaut	Description
`options`Input	`NuiOption<V>[]`		Les options, sous forme d’objets `NuiOption`.
`value`Bidirectionnel	`V \| null`	`null`	La valeur choisie, ou `null`. Fonctionne aussi avec les formulaires.
`values`Bidirectionnel	`readonly V[]`	`[]`	Les valeurs choisies, avec `multiple`.
`multiple`Input	`boolean`	`false`	Permet de choisir plusieurs options, affichées en chips.
`create`Input	`(text: string) => V`		Crée une valeur à partir du texte saisi. La liste propose alors d’ajouter un texte qui n’est pas une option.
`filtering`Input	`boolean`	`true`	Filtre les options pendant la saisie. Désactivez-le quand un serveur les filtre.
`loading`Input	`boolean`	`false`	Affiche une ligne de chargement en attendant les résultats.
`clearable`Input	`boolean`	`false`	Ajoute un bouton qui efface la valeur, et permet de l’effacer avec Échap.
`placeholder`Input	`string`	`''`	Texte affiché tant que le champ est vide.
`label`Input	`string`		Nom accessible, quand aucun `<label>` ne nomme le champ.
`inputId`Input	`string`		Id du champ de texte, pour `<label for>`.
`disabled`Input	`boolean`	`false`	Désactive le champ.
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	Indique si deux valeurs correspondent à la même option, pour les valeurs qui sont des objets.
`displayWith`Input	`(value: V) => string`	`String`	Texte d’une valeur absente des options, par exemple définie avant leur chargement.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Ne rend que les lignes visibles : toujours, jamais, ou `auto` au-delà de 200 lignes.
`queryChange`Output	`string`		Émet le texte au fil de la saisie, pour une recherche côté serveur.
`openChange`Output	`boolean`		Émet quand la liste s’ouvre ou se ferme.
`show`Méthode	`() => void`		Ouvre la liste.
`hide`Méthode	`() => void`		Ferme la liste.
`clear`Méthode	`() => void`		Efface la valeur et le texte.
`focus`Méthode	`(options?: FocusOptions) => void`		Place le focus sur le champ de texte.

Chaque texte qu’il affiche ou annonce est aussi un input, que vous pouvez traduire : emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

Placez-le sur un ng-template dans le composant pour dessiner vous-même chaque ligne. Le contexte contient l’option et sa ligne.

Sélecteur: ng-template[nuiOptionTemplate]

NuiOptionText

Dessine le libellé d’une option avec les lettres trouvées surlignées, sa description et son chemin, pour vos propres lignes.

Sélecteur: [nuiOptionText]

NuiOptionText: Propriétés
Nom	Type	Par défaut	Description
`nuiOptionText`Input	`NuiOptionRow<V>`		La ligne, issue du contexte du template.