API der Komponente Select

Import

import-select.ts

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

Ein Button, der eine Liste von Optionen öffnet.

NuiSelect: 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. Die Liste bleibt beim Auswählen offen.
`selectAll`Input	`boolean`	`false`	Ergänzt mit `multiple` einen Button, der alle Optionen auswählt oder abwählt.
`placeholder`Input	`string`	`'Select…'`	Text, der angezeigt wird, solange nichts gewählt ist.
`label`Input	`string`		Zugänglicher Name, wenn kein `<label>` den Button benennt.
`triggerId`Input	`string`		ID des Buttons, für `<label for>`.
`disabled`Input	`boolean`	`false`	Deaktiviert das Select.
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	Prüft, ob zwei Werte dieselbe Option sind, für Werte, die Objekte sind.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Rendert nur die sichtbaren Zeilen: immer, nie oder `auto` bei mehr als 200 Zeilen.
`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.
`focus`Methode	`(options?: FocusOptions) => void`		Fokussiert den Button.

Auch jeder Text, den die Komponente anzeigt oder ansagt, ist ein Input und lässt sich so übersetzen: selectAllLabel clearAllLabel emptyLabel

Eine Option. Select, Combobox und Befehlspalette nehmen sie alle entgegen.

NuiOption: Eigenschaften
Name	Typ	Beschreibung
`value`Eigenschaft	`V`	Der Wert, den die Auswahl setzt. Beliebiger Typ.
`label`Eigenschaft	`string`	Der angezeigte und durchsuchte Text.
`description`Eigenschaft	`string`	Zusätzlicher Text unter der Beschriftung.
`group`Eigenschaft	`string`	Optionen mit derselben Gruppe stehen der Reihe nach unter dieser Überschrift.
`keywords`Eigenschaft	`string[]`	Weitere Wörter, die die Suche findet, etwa Synonyme oder Codes.
`disabled`Eigenschaft	`boolean`	Wird angezeigt, kann aber nicht gewählt werden.
`children`Eigenschaft	`NuiOption<V>[]`	Optionen eine Ebene tiefer, die die Liste zu einem Baum machen.

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

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

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