API-Referenz

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

Name	Typ	Standard	Beschreibung
`size`	`string \| number`	`50`	Avatar-Größe in Pixeln
`name`	`string`	—	Benutzername zum Generieren von Initialen, wenn Bildquellen fehlschlagen
`src`	`string \| SafeUrl`	—	Primäre benutzerdefinierte Bildquellen-URL für den Avatar
`alt`	`string`	—	Alternativtext für das Avatar-Bild zur Barrierefreiheit
`round`	`boolean`	`true`	Ob der Avatar kreisförmig sein soll (true) oder cornerRadius folgen soll
`interactive`	`boolean`	`false`	Markiert den Avatar als interaktives Steuerelement: exponiert role=“button”, macht ihn fokussierbar und löst clickOnAvatar mit Enter/Space aus. Immer aktivieren, wenn (clickOnAvatar) gebunden wird.
`bgColor`	`string`	—	Hintergrundfarbe für Text-Avatare. Wird automatisch generiert, falls nicht angegeben
`autoColor`	`boolean`	`true`	Bei `true` (Standard) leitet ein Initialen-Avatar seinen Hintergrund aus einem Hash des Namens ab. Auf `false` setzen, um ihn stattdessen über die Variable `--hub-avatar-bg-color` zu gestalten; ein explizites `bgColor` hat immer Vorrang.
`fgColor`	`string`	`#FFF`	Schriftfarbe für Initialen in Text-Avataren
`borderColor`	`string`	—	Rahmenfarbe um den Avatar
`cornerRadius`	`string \| number`	`0`	Eckenradius, wenn round false ist
`textSizeRatio`	`number`	`3`	Verhältnis zur Berechnung der Textgröße aus der Avatar-Größe (size / textSizeRatio)
`initialsSize`	`string \| number`	`0`	Beschränkt die Anzahl der angezeigten Initialen (0 = keine Beschränkung)
`facebookId`	`string`	—	Facebook-Benutzer-ID für das Profilbild (nach bestem Bemühen, API-Einschränkungen können gelten)
`githubId`	`string`	—	GitHub-Benutzername zum Abrufen des Profilbilds
`gravatarId`	`string`	—	Gravatar-E-Mail oder MD5-Hash zum Abrufen des Profilbilds
`value`	`string`	—	Zeigt einen benutzerdefinierten Wert als Avatar an (z. B. "75%", "+5")
`style`	`Partial<CSSStyleDeclaration>`	—	Benutzerdefinierte Stile, die auf das Avatar-Wurzelelement angewendet werden
`referrerpolicy`	`string`	—	Referrer-Policy für das Avatar-Bild (z. B. "no-referrer")
`badge`	`string \| number \| boolean \| null`	—	Eck-Overlay: `badge` / `[badge]="true"` → ein Punkt; `badge="4k"` → eine Pille; null / fehlend → nichts.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	—	Semantische Badge-Farbe (primary · secondary · success · danger · warning · info · light · dark) → `--hub-sys-color-*`.

Outputs

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

Name	Typ	Beschreibung
`clickOnAvatar`	`Source`	Wird ausgelöst, wenn auf den Avatar geklickt wird; gibt das aktuell aktive Quellobjekt zurück

Templates

Noch keine Templates dokumentiert.