API-Referenz

Hier ist der vollständige Vertrag für forms: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle forms mit 87 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`formControlName / [formControl]`	`string \| FormControl`	—	Bindet ein beliebiges Feld an ein reaktives Steuerelement. Fehler werden automatisch angezeigt, wenn das Steuerelement berührt und ungültig ist.
`label`	`string`	`''`	Beschriftungstext des Feldes.
`labelType (hub-input, hub-select, hub-datepicker)`	`'stacked' \| 'floating' \| 'horizontal'`	`'stacked'`	Platzierung der Beschriftung. `floating` legt die Beschriftung in das Steuerelement, wo sie den Platzhalter vertritt, bis das Feld den Fokus erhält oder einen Wert enthält.
`labelType (hub-textarea, hub-otp-input, hub-slider, hub-segmented, hub-timepicker)`	`'stacked' \| 'horizontal'`	`'stacked'`	Platzierung der Beschriftung. Diese Felder haben keine `floating`-Variante: Wird `floating` übergeben, rendern sie eine gestapelte Beschriftung.
`placeholder (hub-input, hub-select, hub-textarea, hub-datepicker)`	`string`	`'' / NgSelectConfig.placeholder (hub-select)`	Platzhaltertext.
`formText`	`string`	—	Hilfetext, der unter dem Steuerelement angezeigt wird.
`type (hub-input) — file is deprecated`	`'text' \| 'number' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'color' \| 'checkbox' \| 'switch' \| 'counter' \| 'file'`	`'text'`	Das hub-input-Format.
`passwordRevealed (hub-input)`	`boolean`	`false`	Bidirektionaler Sichtbarkeitsstatus eines Passwortfelds. Ein Klick auf die Augen-Schaltfläche aktualisiert ihn; das Setzen zeigt den Wert an oder verbirgt ihn.
`passwordToggle (hub-input)`	`boolean`	`true`	Gibt an, ob die integrierte Anzeige/Verbergen-Schaltfläche bei Passwortfeldern gerendert wird.
`hideOnBlur (hub-input)`	`boolean`	`true`	Gibt an, ob ein angezeigtes Passwort automatisch wieder verborgen wird, sobald das Feld den Fokus verliert.
`capsLockWarning (hub-input)`	`boolean`	`true`	Gibt an, ob unter dem Feld ein Hinweis angezeigt wird, solange die Feststelltaste aktiv ist.
`passwordStrength (hub-input)`	`boolean`	`false`	Zeigt eine optionale 4-Segment-Stärkeanzeige unter dem Feld. Die Bewertung ist über provideHubForms überschreibbar.
`autocomplete (hub-input)`	`string`	`''`	Natives autocomplete-Attribut, z. B. current-password oder new-password für Passwortmanager.
`clearable (hub-input)`	`boolean`	`false`	Wenn true, erscheint ein internes ✕, sobald das Feld einen Wert hat; es leert das Control und sendet einen leeren Suchbegriff.
`debounceTime (hub-input)`	`number`	`0`	Entprellung in Millisekunden, bevor das search-Ereignis ausgelöst wird (0 = bei jedem Tastendruck).
`mask (hub-input)`	`string`	—	Mustermaske für Textformate. Tokens: 0 = Ziffer, A = Buchstabe, * = alphanumerisch; andere Zeichen sind literale Trennzeichen. Z. B. "0000 0000 0000 0000".
`unmaskValue (hub-input)`	`boolean`	`false`	Speichert bei gesetzter Maske die rohen eingegebenen Zeichen (ohne Trennzeichen) im Formular anstelle des formatierten Textes.
`range (hub-slider)`	`boolean`	`false`	Bereichsregler mit zwei Reglern; der Wert wird zu einem [lower, upper]-Tupel.
`options (hub-segmented)`	`HubSegmentedOption[]`	`[]`	Die auswählbaren Optionen für hub-segmented in Renderreihenfolge — jeweils { value, label, disabled? }.
`size (hub-segmented)`	`'sm' \| 'md' \| 'lg'`	`'md'`	Visuelle Dichte des Segmented Control: 'sm', 'md' (Standard) oder 'lg'.
`disabled (all fields)`	`boolean (two-way, model)`	`false`	Deaktiviert das Feld. Wird von jedem Feld aus der gemeinsamen Basis geerbt und ist bidirektional — ein Feld, das über sein reaktives Steuerelement deaktiviert wird, meldet die Änderung zurück. Bei `hub-segmented` können sich zudem einzelne Optionen über `option.disabled` abmelden.
`multiple (hub-segmented)`	`boolean`	`false`	Mehrfachauswahl erlauben; der Wert wird ein Array und die Optionen schalten um (aria-pressed).
`vertical (hub-segmented)`	`boolean`	`false`	Stapelt die Segmente vertikal statt in einer horizontalen Reihe.
`vertical (hub-select) — deprecated`	`boolean`	`false`	Veraltet und an die veralteten Nicht-dropdown-Formate gebunden: ordnet die buttons-/checkbox-/radio-Optionen vertikal an. Verwenden Sie `<hub-segmented [vertical]="true">`.
`color (hub-segmented)`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral' \| string`	`''`	Semantischer Akzent des ausgewählten Segments (primary, success, …) oder eine beliebige Farbe; gleitet im Single-Modus.
`value (hub-segmented)`	`unknown \| unknown[]`	`undefined`	Two-Way-bindbarer ausgewählter Wert (model()): der Wert der gewählten Option im Single-Modus, ein Array ausgewählter Werte im Multiple-Modus. Gibt valueChange aus; üblicherweise stattdessen über formControlName gesteuert.
`format (hub-select) — deprecated for buttons/checkbox/radio`	`'dropdown' \| 'buttons' \| 'checkbox' \| 'radio'`	`'dropdown'`	Wie das Select denselben Wert rendert.
`prepend / append (hub-input, hub-select, hub-textarea, hub-datepicker, hub-timepicker)`	`string \| string[]`	`''`	Statische Gruppen-Addons an jedem Feld, das als Box dargestellt wird: Eine Zeichenkette ist ein Addon, ein Array eine Reihe davon, und leere Einträge werden verworfen statt als leere Box gezeichnet. Das Addon teilt sich den Rahmen des Feldes und ist nicht fokussierbar — für ein interaktives Steuerelement am Rand verwenden Sie stattdessen die Templates [hubPrepend] / [hubAppend]. Beide können vorhanden sein, und der projizierte Inhalt ist immer das äußerste Element auf seiner Seite.
`items / bindLabel / bindValue / multiple (hub-select)`	`any[] / string / string / boolean`	—	Optionen, die label/value-Eigenschaftsnamen für Objektelemente und Mehrfachauswahl.
`groupBy (hub-select)`	`string \| undefined`	`undefined`	Eigenschaftsname (Punktpfad), nach dem die Dropdown-Elemente unter Optionsgruppen-Überschriften gruppiert werden.
`searchable / clearable (hub-select)`	`boolean`	`true`	Ob die Optionen durch Tippen gefiltert werden können (searchable) und ob die Auswahl mit der eingebauten Löschen-Schaltfläche geleert werden kann (clearable). Beide sind standardmäßig true.
`closeOnSelect (hub-select)`	`boolean`	`true`	Ob sich das Dropdown nach dem Auswählen eines Elements schließt. Auf false setzen, um es beim Auswählen mehrerer Werte im Multiple-Modus geöffnet zu halten.
`fixedPlaceholder (hub-select)`	`boolean`	`false`	Hält den Platzhalter auch dann sichtbar, wenn ein Wert ausgewählt ist. Standard: false (der Platzhalter wird bei Auswahl ausgeblendet) — kehrt damit den unkonventionellen Standard von ng-select v23 um.
`loading / notFoundText (hub-select)`	`boolean / string`	`false / NgSelectConfig.notFoundText`	loading rendert den Ladezustand des Dropdowns, während asynchrone Elemente geladen werden; notFoundText ist die Meldung, die angezeigt wird, wenn keine Elemente dem Suchbegriff entsprechen.
`readonly (hub-input, hub-select, hub-textarea, hub-datepicker, hub-otp-input, hub-timepicker)`	`boolean`	`false`	Wenn true, zeigt das Feld seinen Wert an, weist aber jede Interaktion zurück — ohne Disabled-Styling und ohne Änderung des Formularstatus.
`appendTo (hub-select)`	`string \| undefined`	`'body'`	CSS-Selektor des Elements, an das das Dropdown-Panel angehängt wird. Standard: 'body', damit das Panel overflow-/transform-Vorfahren (Cards, Scroll-Container, Modals) entkommt; undefined übergeben, um es inline zu rendern.
`addTag (hub-select)`	`boolean \| ((term: string) => any \| Promise<any>)`	`false`	Erzeugt Elemente aus dem Suchbegriff (dropdown-Format): true fügt den Begriff unverändert hinzu; eine Funktion bildet den Begriff auf ein neues Element ab, synchron oder als Promise.
`addTagText (hub-select)`	`string`	`NgSelectConfig.addTagText`	Beschriftung der „Element hinzufügen“-Zeile, die beim Tippen erscheint, wenn addTag aktiviert ist.
`minTermLength (hub-select)`	`number`	`0`	Minimale Länge des Suchbegriffs, bevor das Filtern (oder das typeahead-Subject) greift.
`typeahead (hub-select)`	`Subject<string> \| undefined`	`undefined`	Subject, das Änderungen des Suchbegriffs für asynchrones/serverseitiges Laden empfängt; ist es gesetzt, wird das clientseitige Filtern abgeschaltet — die Ergebnisse über items zurückspielen.
`compareWith (hub-select)`	`((a: any, b: any) => boolean) \| undefined`	`undefined`	Eigene Gleichheit zwischen einem Element und dem gebundenen Wert (z. B. Objekte per id verglichen); ohne Angabe gilt der eingebaute Vergleich des Anbieters.
`searchFn (hub-select)`	`((term: string, item: any) => boolean) \| undefined`	`undefined`	Ersetzt den eingebauten Abgleich, den `searchable` verwendet. Erhält den eingegebenen Begriff und ein Element und gibt zurück, ob das Element passt — so kann eine Suche auch Felder berücksichtigen, die die Beschriftung nicht anzeigt.
`mode (hub-datepicker)`	`'single' \| 'range' \| 'day-time-range'`	`'single'`	Einzelnes Datum, freier Datumsbereich oder ein Tag mit Start- und Endzeit innerhalb dieses Tages.
`granularity (hub-datepicker)`	`'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	Genauigkeit jedes gewählten Punktes und das Panel, das ihn wählt: year und month zeigen ein Raster aus 12 Zellen, day den Kalender, und hour, minute und second ergänzen ihn um eine Zeitleiste. Orthogonal zu mode: mode sagt, wie viele Punkte gewählt werden, granularity, wie genau jeder einzelne ist. Standard ist day, das denselben YYYY-MM-DD-String wie bisher ausgibt; ab hour ist der Wert ein vollständiger ISO-8601-Zeitstempel mit der lokalen Uhrzeit des Lesers und dem Offset dieses Datums.
`valueFormat / parse (hub-datepicker)`	`'iso' \| 'date' \| 'timestamp' \| ((date) => unknown) / ((raw) => Date \| null) \| null`	`'iso' / null`	Die Wertachsen. valueFormat legt fest, was das gebundene Control enthält: 'iso' (Standard), 'date' für ein natives Date, 'timestamp' für Epoch-Millisekunden oder eine Funktion für alles andere. parse legt fest, wie ein eingehender Wert gelesen wird, und ersetzt die eingebaute Erkennung von ISO-Strings jeder Breite, Date-Instanzen und Epoch-Millisekunden — und gilt auch für min und max.
`minuteStep / secondStep / hourFormat (hub-datepicker)`	`number / number / '12' \| '24' \| undefined`	`5 / 1 / undefined`	Zeit-Steuerung: minuteStep und secondStep sind die Schrittweiten der Spinbuttons, und hourFormat erzwingt eine 12- oder 24-Stunden-Uhr — ohne Angabe aus der Locale abgeleitet und sowohl auf die Feldanzeige als auch auf das Panel angewendet, damit beide sich nie widersprechen können. Alle drei greifen auf die globale provideHubForms-Konfiguration zurück.
`min / max / disabledDates (hub-datepicker)`	`string \| Date \| number \| null / ((date: Date) => boolean) \| null`	`null`	Auswählbare Grenzen und ein Prädikat zum Deaktivieren einzelner Daten. Die Grenzen berücksichtigen die Uhrzeit, nicht nur den Tag: Ein Tag wird nur deaktiviert, wenn kein Zeitpunkt darin erlaubt ist, sodass min = 2026-09-01T14:00 den 1. September klickbar lässt und die Zeit-Steuerung die früheren Stunden ablehnt. Akzeptiert einen ISO-String, ein Date oder Epoch-Millisekunden.
`locale / firstDayOfWeek / weekdayFormat (hub-datepicker)`	`string / number / 'short' \| 'narrow' \| 'long'`	`LOCALE_ID / undefined / undefined`	Kalender-i18n: locale ist das BCP-47-Tag für den Anzeigewert und die Monats-/Wochentagsnamen (Standard: die LOCALE_ID der App, mit Rückfall auf en-US); firstDayOfWeek legt den ersten Wochentag fest (0 = Sonntag, 1 = Montag…); weekdayFormat wählt die Breite der Wochentags-Kopfzeile. Die letzten beiden greifen auf die globale provideHubForms-Konfiguration zurück.
`displayFormat / timeDisplayFormat / rangeSeparator / labels (hub-datepicker)`	`Intl.DateTimeFormatOptions \| string \| ((date) => string) / Intl.DateTimeFormatOptions / string / Partial<HubDatepickerLabels>`	`undefined / undefined / undefined / {}`	Anzeigeformatierung: displayFormat rendert den ausgewählten Wert und akzeptiert Intl.DateTimeFormatOptions, ein Angular-Datumsmuster wie 'dd/MM/yyyy HH:mm' oder eine Funktion; timeDisplayFormat wird darüber gelegt, sobald die Granularität eine Uhrzeit trägt, sodass der Datumsteil behält, was displayFormat vorgab; rangeSeparator ist der Text zwischen den beiden Daten eines Bereichs; und labels überschreibt die UI-Beschriftungen pro Instanz (über die globale Konfiguration gemischt).
`clearable / showToday / closeOnSelect (hub-datepicker)`	`boolean`	`true / true / true`	Verhaltens-Flags: clearable zeigt den Löschen-Shortcut, showToday zeigt den „Heute“-Shortcut und closeOnSelect schließt den Kalender nach der Datumswahl (nur im Single-Modus). Standardwerte: true / true / true.
`multiple (hub-file-input)`	`boolean`	`false`	Ob mehr als eine Datei gehalten werden kann. Ändert den Steuerwert von File zu File[].
`accept (hub-file-input)`	`string`	`'*'`	Erlaubte Dateitypen, z. B. image/*,.pdf. Gilt auch beim Ablegen und Einfügen, nicht nur im Systemdialog.
`maxSize / minSize / maxTotalSize (hub-file-input)`	`number \| null`	`null`	Maximale und minimale Größe je Datei sowie maximale Gesamtgröße, in Bytes.
`maxFiles (hub-file-input)`	`number \| null`	`null`	Maximale Anzahl an Dateien. Nur zusammen mit multiple sinnvoll.
`dragDrop / paste (hub-file-input)`	`boolean`	`true`	Ob Dateien auf das Feld gezogen und ob sie hineingefügt werden können.
`preview (hub-file-input)`	`'none' \| 'list' \| 'grid'`	`'list'`	Wie die Dateien dargestellt werden: gar nicht, als Liste oder als Miniaturbild-Raster.
`allowDuplicates (hub-file-input)`	`boolean`	`false`	Ob dieselbe Datei zweimal ausgewählt werden kann (Schlüssel: Name, Größe, Änderungsdatum).
`capture (hub-file-input)`	`'user' \| 'environment' \| null`	`null`	Öffnet auf unterstützten Plattformen die Gerätekamera statt des Dateibrowsers.
`autoUpload (hub-file-input)`	`boolean`	`true`	Ob eine neu akzeptierte Datei sofort hochgeladen wird. Ohne registrierten Uploader wirkungslos.
`buttonLabel / hint (hub-file-input)`	`string \| null`	`null`	Überschreibt den Text der Durchsuchen-Schaltfläche und den automatisch erzeugten Hinweis zu den Beschränkungen.
`dropText / dropSubtext (hub-file-input)`	`string \| null`	`null`	Überschreibt je Instanz die beiden Einladungszeilen der Ablagezone. Beide greifen sonst auf die globalen Beschriftungen zurück.
`classlist (every field except hub-segmented and hub-legend)`	`string`	`''`	Zusätzliche CSS-Klassen für das Host-Element.
`showValid (all fields)`	`boolean`	`HubFormsConfig.showValid`	Ob ein gültiges Feld seinen gültigen Zustand anzeigt. Standardmäßig aus, denn ein Formular, das jedes unberührte Feld grün einfärbt, sagt nichts aus; der ungültige Zustand wird immer angezeigt.
`validFeedback (all fields)`	`string \| null`	`null`	Meldung, die unter dem Feld angezeigt wird, sobald es gültig ist — sofern `showValid` aktiviert ist.
`invalidFeedbackTemplateFn (all fields)`	`((key: string, value: any) => string) \| null`	`null`	Überschreibt die Meldung für einen bestimmten Fehlerschlüssel allein für dieses Feld. Erhält den Fehlerschlüssel und dessen Wert und gibt den Text zurück — der anwendungsweite Standard liegt in `provideHubForms`.
`min / max (hub-input)`	`number \| undefined (two-way, model)`	`undefined`	Numerische Grenzen für die Formate number und counter. Bidirektional, sodass ein Zähler, der seinen eigenen Wert begrenzt, die Grenze zurückmeldet.
`mode (hub-otp-input)`	`'numeric' \| 'alphanumeric' \| 'alpha'`	`'numeric'`	Welche Zeichen ein Feld akzeptiert und welche Tastatur ein Telefon anbietet: nur Ziffern oder Buchstaben und Ziffern.
`min / max (hub-timepicker)`	`string (HH:MM)`	`''`	Früheste und späteste Uhrzeit, die das Feld akzeptiert, als `HH:MM`. Leer bedeutet unbegrenzt.
`step (hub-timepicker)`	`number (seconds)`	`0`	Granularität des nativen Steppers, in Sekunden. `0` belässt den Browser-Standard von einer Minute.
`group / groupName (form[hubForm], hub-fieldset)`	`AbstractControl \| null / string \| undefined`	`null / undefined`	Die Gruppe, deren Fehler der Container anzeigt. Übergeben Sie `group` direkt ein `AbstractControl` oder `groupName` den Namen eines Kindes des umgebenden Formulars — beides ist nicht nötig, wenn der Container die Gruppe, über die er berichtet, bereits umschließt.
`errorTrigger (form[hubForm], hub-fieldset)`	`'touched' \| 'submit' \| 'always'`	`'touched'`	Wann Fehler auf Gruppenebene sichtbar werden: sobald die Gruppe berührt wurde, erst nach einem Absendeversuch oder sofort.
`formTextType (all fields)`	`'bottom'`	—	Position des Hilfetexts. Nur `bottom` wird unterstützt.
`rows (hub-textarea)`	`number`	—	Anzahl der sichtbaren Textzeilen.
`cols (hub-textarea)`	`number`	—	Anzahl der sichtbaren Spalten. Ist der Wert gesetzt, dehnt sich das Textfeld nicht mehr auf die volle Breite.
`maxlength (hub-textarea)`	`number`	—	Maximale Zeichenzahl. Steuert sowohl das native Limit als auch den Zähler.
`counter (hub-textarea)`	`boolean`	—	Ob unter dem Steuerelement ein Zeichenzähler angezeigt wird.
`autoresize (hub-textarea)`	`boolean`	—	Ob das Textfeld mit seinem Inhalt mitwächst.
`length (hub-otp-input)`	`number`	—	Anzahl der Felder bzw. Zeichen des Codes.
`secret (hub-otp-input)`	`boolean`	—	Maskiert die Zeichen wie ein Passwort.
`separator (hub-otp-input)`	`string`	—	Das Trennzeichen zwischen den Gruppen.
`separatorEvery (hub-otp-input)`	`number`	—	Fügt alle N Felder einen sichtbaren Trenner ein (0 = keiner).
`showValue (hub-slider)`	`boolean`	—	Ob die Wertblasen über den Reglern angezeigt werden.
`step (hub-input, hub-slider)`	`number`	—	Schrittweite (numerische Felder bzw. Zähler).
`legend (hub-fieldset)`	`string`	—	Text der Legende. Wird ignoriert, wenn ein `hubLegend`-Template projiziert wird.
`required (all fields)`	`boolean \| null (two-way, model)`	`null`	Ob das Feld ein Pflichtfeld ist. Bei einer reaktiven Bindung wird es aus den Validatoren des Steuerelements selbst abgeleitet, sodass eine direkte Angabe im Template nur bei template-getriebenen Feldern berücksichtigt wird; es steuert das Sternchen und das `required`-Attribut.
`required (hub-legend)`	`boolean`	—	Ob der Pflichtfeld-Indikator dargestellt wird.
`invalid (hub-legend)`	`boolean`	—	Ob die Darstellung für den ungültigen Zustand angewendet wird.

Outputs

Reagiere darauf, was forms tut — 13 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`valueChange`	`EventEmitter<value>`	Wird ausgelöst, wann immer sich der Feldwert ändert.
`search (hub-input)`	`EventEmitter<string>`	Entprellter Typeahead-Begriff, der während der Eingabe ausgegeben wird (Textfelder).
`rejected (hub-file-input)`	`EventEmitter<HubFileRejection[]>`	Die von den deklarierten Beschränkungen abgelehnten Dateien, jeweils mit dem Grund der Ablehnung.
`fileRemoved (hub-file-input)`	`EventEmitter<File>`	Die aus der Auswahl entfernte Datei.
`uploadStateChange (hub-file-input)`	`EventEmitter<readonly HubFileItem[]>`	Die vollständige Elementliste, sobald ein Upload Status oder Fortschritt ändert.
`submit (form[hubForm]) — the native event`	`SubmitEvent (native, not a custom output)`	Kein eigener Output: `hubForm` lauscht auf das `submit`-Ereignis des Formulars selbst, verhindert die Standard-Navigation, markiert den Baum als berührt und setzt den submitted-Status. Binden Sie `(submit)` am Formular für Ihren eigenen Handler.
`disabledChange / requiredChange (all fields) · labelTypeChange / placeholderChange / minChange / maxChange / passwordRevealedChange (hub-input) · valueChange (hub-segmented)`	`EventEmitter<T> (the paired half of each two-way model)`	Jeder bidirektionale `model()`-Input veröffentlicht einen passenden `Change`-Output, damit `[(disabled)]` und Ähnliches funktionieren. Sie sind hier aufgeführt, weil die Banana-in-a-Box-Syntax sie verbirgt.
`opened / closed / cleared / viewChange (hub-datepicker)`	`EventEmitter`	Kalender-Lebenszyklus- und Navigationsereignisse.
`onOpen / onClose / onClear / onSearch / onAdd / onRemove (hub-select)`	`EventEmitter`	Dropdown-Lebenszyklus- und Tag-/Typeahead-Ereignisse.
`onFocus / onBlur (hub-select)`	`EventEmitter<any>`	Werden ausgelöst, wenn das Dropdown-Steuerelement den Fokus erhält oder verliert (dropdown-Format), und reichen die focus/blur-Ereignisse des Anbieters weiter.
`scroll / scrollToEnd (hub-select)`	`EventEmitter<{ start: number; end: number }> / EventEmitter<any>`	scroll gibt das sichtbare { start, end }-Fenster aus, während die Dropdown-Liste scrollt; scrollToEnd wird ausgelöst, wenn die Liste ihr Ende erreicht — der Hook für unendliches/seitenweises Laden mit typeahead.
`enter (hub-input)`	`EventEmitter<number \| string \| boolean \| File \| FileList \| null>`	Gibt den aktuellen Wert aus, wenn Enter gedrückt wird.
`completed (hub-otp-input)`	`EventEmitter<string>`	Gibt den vollständigen Code aus, sobald alle Felder gefüllt sind.

Templates

Mach es zu deinem — 10 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`hubFormText`	Projiziert reichhaltigen Hilfetext-Inhalt.	`<ng-template hubFormText>…</ng-template>`
`hubValidationError`	Überschreibt die Meldung für einen bestimmten Fehlerschlüssel.	`<ng-template hubValidationError key="min">…</ng-template>`
`hubLegend`	Benutzerdefinierter fieldset-Legenden-Inhalt.	`<ng-template hubLegend>…</ng-template>`
`ng-option-tmp (hub-select)`	Benutzerdefiniertes Rendern von Dropdown-Optionen (re-exportierte ng-select-Direktive).	`<ng-template ng-option-tmp let-item="item">…</ng-template>`
`hubFileIcon (hub-file-input)`	Symbol je Datei für Dateien ohne Miniaturbild; erhält das Element als impliziten Kontext.	`<ng-template hubFileIcon let-item>…</ng-template>`
`hubFilePreview (hub-file-input)`	Ersetzt die gesamte Darstellung einer ausgewählten Datei und erhält das Element sowie die Aktionen Entfernen, Wiederholen und Abbrechen.	`<ng-template hubFilePreview let-item let-remove="remove">…</ng-template>`
`hubFileDropzoneNotice (hub-file-input)`	Projiziert beliebiges Markup oben in der Ablagezone, über dem Symbol — für einen Hinweis, den weder die Einladung noch der Hinweis auf die Beschränkungen ausdrücken kann.	`<p hubFileDropzoneNotice>2 documents still missing</p>`
`hubSegmentedOption (hub-segmented)`	Ersetzt den Inhalt jedes Segments (Icons, Badges, reichhaltiges Markup), während die Komponente weiterhin Auswahl, Tastaturnavigation und ARIA steuert. Kontext: die Option (implizit), selected und index.	`<ng-template hubSegmentedOption let-option let-selected="selected" let-index="index">…</ng-template>`
`hubSelectSuffix (hub-select, veraltet)`	Veraltet seit 22.16.0 — verwenden Sie [hubAppend], das auf jedem Feld dasselbe tut. Es funktioniert weiterhin; [hubAppend] gewinnt, wenn beide vorhanden sind. Fügt ein interaktives Element an die Endkante des Selects — eine Schaltfläche, die auf die Auswahl wirkt: konfigurieren, nachschlagen, neu anlegen. Als Template deklariert und nicht als projizierter Inhalt, weil das Sammel-ng-content des Selects die ng-option-Elemente an die Engine weitergibt und es verschlucken würde; das Rendern aus einem Template hält die Aktion außerdem im DOM hinter dem Control, sodass die Tabulatorreihenfolge zuerst das Feld erreicht. Control und Aktion teilen einen Rahmen und lesen sich als ein Feld.	`<ng-template hubSelectSuffix><button …>…</button></ng-template>`
`hubPrepend / hubAppend (all box-shaped fields)`	An die Kante eines Feldes angefügter Inhalt, reicher als der Text, den ein prepend-/append-String tragen kann: ein Icon oder eine Schaltfläche, die auf den Wert wirkt. Verfügbar bei jedem Feld, das als Kasten mit einem Wert erscheint — hub-input, hub-select, hub-textarea und hub-datepicker. Es ergänzt die Text-Addons, statt sie zu ersetzen: die Strings werden zuerst gerendert, sodass projizierter Inhalt immer das äußerste Element seiner Seite ist — eine Einheit beschriftet das Feld, die Aktion liegt dahinter. Das Projizierte trägt Rahmen, Radius und Höhe des Feldes statt der eigenen, damit eine Schaltfläche keine zweite, dickere Naht neben dem Control zeichnet. Als Template deklariert, weil das ng-content des Feldes bereits vergeben ist. Ein Slot kann auch ein weiteres Feld aufnehmen — hub-input, hub-select, hub-textarea oder hub-datepicker als direktes Kind —, das bündig mit dem tragenden Feld abschließt, damit ein Preis und der Zeitraum, für den er gilt, als die eine Aussage gelesen werden, die sie sind.	`<ng-template hubAppend><button …><hub-icon … /></button></ng-template>`