API-Referenz

Hier ist der vollständige Vertrag für badges: 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 badges mit 20 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`variant`	`HubBadgeVariant`	`'solid'`	Visuelle Gestaltung des Badge-Gehäuses.
`color`	`HubBadgeColor`	`'primary'`	Semantische Farbfamilie. Integrierte Werte entsprechen den Token-Familien des Design-Systems, eigene Namen werden unterstützt.
`size`	`HubBadgeSize`	`'md'`	Größenskala des Badges.
`shape`	`HubBadgeShape`	`'pill'`	Eckengestaltung des Badge-Gehäuses.
`dot`	`boolean`	`false`	Zeigt einen vorangestellten Statuspunkt vor der Beschriftung an.
`removable`	`boolean`	`false`	Aktiviert die Schließen-Aktion und macht das Badge zu einem entfernbaren Filter/Tag.
`removeLabel`	`string`	`'Remove badge'`	Barrierefreie Beschriftung für die Schließen-Schaltfläche.
`tooltip`	`string`	`''`	Expliziter Tooltip-Text. Ohne Angabe zeigt das Badge seinen Inhalt nur als Tooltip, wenn er gekürzt ist.
`interactive`	`boolean`	`false`	Verwandelt das Badge in einen interaktiven Umschalter: stellt role="button" bereit, einen Tabulator-Haltepunkt für die Tastatur und gibt bei Aktivierung das selected-Output aus.
`active`	`boolean`	`false`	Spiegelt den gedrückten/ausgewählten Zustand eines interaktiven Badges wider und schaltet .hub-badge--active sowie das aria-pressed-Attribut um.
`dotOverlay`	`boolean`	`false`	Rendert den Statuspunkt als Eck-Overlay, das an der Badge-Hülle fixiert ist, anstatt als inline vorangestellten Punkt.
`dotPlacement`	`HubBadgeOverlayPlacement`	`'top-end'`	Ecke, an der der Overlay-Punkt fixiert wird, wenn dotOverlay aktiviert ist (z. B. top-end, top-start, bottom-end, bottom-start).
`hub-chip · selected`	`model<boolean>`	`false`	hub-chip: Zwei-Wege-selected-Zustand (gedrückt) des Chips.
`hub-chip · value`	`unknown`	`undefined`	hub-chip: opaker Wert, der den Chip innerhalb seines umschließenden hub-chip-set identifiziert.
`hub-chip · color`	`HubBadgeColor`	`'primary'`	hub-chip: semantischer Akzent, der die Chip-Farben steuert, gemeinsam genutzt mit hub-badge.
`hub-chip · disabled`	`boolean`	`false`	hub-chip: deaktiviert den Chip — kein Umschalten, kein Entfernen, aus der Tab-Reihenfolge entfernt.
`hub-chip · removable`	`boolean`	`false`	hub-chip: aktiviert die Möglichkeit zum Verwerfen und spiegelt das Verwerf-Muster des Badges wider.
`hub-chip · removeLabel`	`string`	`'Remove chip'`	hub-chip: barrierefreies Label der Verwerf-Schaltfläche.
`hub-chip-set · selectionMode`	`'single' \| 'multiple'`	`'single'`	hub-chip-set: ob einer (single) oder mehrere (multiple) Chips gleichzeitig ausgewählt werden können.
`hub-chip-set · value`	`model<unknown>`	`undefined`	hub-chip-set: Zwei-Wege-Auswahlwert — der ausgewählte Chip-value im single-Modus oder das Array der ausgewählten Werte im multiple-Modus.

Outputs

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

Name	Typ	Beschreibung
`removed`	`EventEmitter<void>`	Wird ausgelöst, wenn die Schließen-Aktion eines entfernbaren Badges aktiviert wird.
`selected`	`EventEmitter<void>`	Wird ausgegeben, wenn ein interaktives Badge per Klick, Enter oder Space aktiviert wird.
`hub-chip · selectedChange`	`EventEmitter<boolean>`	hub-chip: wird ausgegeben, sobald sich der Zwei-Wege-selected-Zustand ändert.
`hub-chip · removed`	`EventEmitter<void>`	hub-chip: wird ausgegeben, wenn die Verwerf-Schaltfläche aktiviert wird.
`hub-chip · chipClick`	`EventEmitter<void>`	hub-chip: wird bei jeder Aktivierung (Klick / Enter / Space) ausgegeben, bevor das Umschalten angewendet wird.
`hub-chip-set · valueChange`	`EventEmitter<unknown>`	hub-chip-set: wird ausgegeben, sobald sich der Zwei-Wege-Auswahlwert ändert.

Templates

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

Name	Beschreibung	Beispiel
`[hubChipLeading]`	Projiziert ein vorangestelltes Icon oder einen Avatar in den Chip, gerendert vor dem Chip-Inhalt.	`<hub-chip [value]="'open'" color="success"> <i hubChipLeading class="fa-solid fa-circle" aria-hidden="true"></i> Open </hub-chip>`