API der Komponente Combobox

Import

import-combobox.ts

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

NuiCombobox

Ein Textfeld, das beim Tippen Optionen vorschlägt.

Selektor: nui-combobox

NuiCombobox: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`options`Input	`NuiOption<V>[]`		Die Optionen als `NuiOption`-Objekte.
`value`Two-Way	`V \| null`	`null`	Der gewählte Wert oder `null`. Funktioniert auch mit Formularen.
`values`Two-Way	`readonly V[]`	`[]`	Die gewählten Werte, mit `multiple`.
`multiple`Input	`boolean`	`false`	Erlaubt die Wahl mehrerer Optionen, angezeigt als Chips.
`create`Input	`(text: string) => V`		Macht aus eingegebenem Text einen Wert. Die Liste bietet dann an, Text hinzuzufügen, der keine Option ist.
`filtering`Input	`boolean`	`true`	Filtert die Optionen beim Tippen. Schalte es aus, wenn ein Server sie filtert.
`loading`Input	`boolean`	`false`	Zeigt eine Ladezeile, solange Ergebnisse unterwegs sind.
`clearable`Input	`boolean`	`false`	Ergänzt einen Button, der den Wert leert, und lässt Esc ihn leeren.
`placeholder`Input	`string`	`''`	Text, der angezeigt wird, solange das Feld leer ist.
`label`Input	`string`		Zugänglicher Name, wenn kein `<label>` das Feld benennt.
`inputId`Input	`string`		ID des Textfelds, für `<label for>`.
`disabled`Input	`boolean`	`false`	Deaktiviert das Feld.
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	Prüft, ob zwei Werte dieselbe Option sind, für Werte, die Objekte sind.
`displayWith`Input	`(value: V) => string`	`String`	Text für einen Wert, der nicht unter den Optionen ist, etwa einen, der vor dem Laden gesetzt wurde.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Rendert nur die sichtbaren Zeilen: immer, nie oder `auto` bei mehr als 200 Zeilen.
`queryChange`Output	`string`		Emittiert den Text während der Eingabe, für eine Suche auf dem Server.
`openChange`Output	`boolean`		Emittiert, wenn sich die Liste öffnet oder schließt.
`show`Methode	`() => void`		Öffnet die Liste.
`hide`Methode	`() => void`		Schließt die Liste.
`clear`Methode	`() => void`		Leert den Wert und den Text.
`focus`Methode	`(options?: FocusOptions) => void`		Fokussiert das Textfeld.

Auch jeder Text, den die Komponente anzeigt oder ansagt, ist ein Input und lässt sich so übersetzen: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

Setze es auf ein ng-template in der Komponente, um jede Zeile selbst zu zeichnen. Der Kontext enthält die Option und ihre Zeile.

Selektor: ng-template[nuiOptionTemplate]

NuiOptionText

Zeichnet die Beschriftung einer Option mit markierten Treffern, ihre Beschreibung und ihren Pfad, für eigene Zeilen.

Selektor: [nuiOptionText]

NuiOptionText: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`nuiOptionText`Input	`NuiOptionRow<V>`		Die Zeile, aus dem Template-Kontext.