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 22 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`size`	`string \| number`	`50`	Avatar-Größe: eine nackte Zahl sind Pixel; jede CSS-Länge (1.75rem, 50%, calc(2rem + 12px)) wird so gezeichnet, wie sie dasteht
`name`	`string \| null`	—	Benutzername zum Generieren von Initialen, wenn Bildquellen fehlschlagen
`src`	`string \| SafeUrl \| null`	—	Primäre benutzerdefinierte Bildquellen-URL für den Avatar
`alt`	`string \| null`	—	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 \| undefined`	—	Farbe der Initialen und des projizierten Inhalts. Ohne Angabe wählt der Avatar je nach Hintergrund Schwarz oder Weiß — was den WCAG-Wert erreicht; ein ausdrücklicher Wert gewinnt immer, mit oder ohne Kontrast.
`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 \| null`	—	Facebook-Benutzer-ID für das Profilbild (nach bestem Bemühen, API-Einschränkungen können gelten)
`githubId`	`string \| null`	—	GitHub-Benutzername zum Abrufen des Profilbilds
`gravatarId`	`string \| null`	—	Gravatar-E-Mail oder MD5-Hash zum Abrufen des Profilbilds
`value`	`string \| null`	—	Zeigt einen benutzerdefinierten Wert als Avatar an (z. B. "75%", "+5")
`style`	`Record<string, string \| number \| null \| undefined> \| string`	—	Inline-Styles, die in den gerenderten Inhalt einfließen – das Bild, die Initialen oder den Slot des projizierten Inhalts. Akzeptiert ein Style-Objekt oder einen CSS-String; das Host-Element wird nie erreicht
`referrerpolicy`	`string \| null`	—	Referrer-Policy für das Avatar-Bild (z. B. "no-referrer")
`placeholder`	`string`	—	Bild der letzten Instanz: wird nur gezeigt, solange nichts anderes da ist — keine Quelle aufgelöst, keine angegeben oder eine lädt noch — und auch keine Initialen. Es tritt nie in die Fallback-Kette ein und kann die Initialen daher nicht verdrängen, wie `src` es täte.
`badge`	`string \| number \| boolean \| null`	`null`	Eck-Overlay: `badge` / `[badge]="true"` → ein Punkt; `badge="4k"` → eine Pille; null / fehlend → nichts.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	`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`	`OutputEmitterRef<Source \| null>`	Wird beim Klick ausgelöst, und mit Enter/Leertaste, wenn `interactive` gesetzt ist. Liefert die Quelle, die den Avatar zeichnet — ihren `sourceType`, ihre `sourceId` und `getAvatar(size)` —, oder null, wenn keine aufgelöst wurde. `Source` wird aus dem Paket exportiert, sodass der Handler den Typ benennen kann, statt auf any auszuweichen

Methoden

Steuere avatar aus dem Code heraus — 1 Methoden auf der programmatischen Schnittstelle.

Name	Signatur	Rückgabe	Beschreibung
`Source.getAvatar`	`getAvatar(size: number): string`	`string`	Löst auf, was die Quelle in einer gegebenen Größe zeichnet: die Bild-URL bei einer entfernten Quelle, die Initialen oder den reinen Text bei einer lokalen. `Source` ist die Nutzlast von `clickOnAvatar` und wird aus dem Paket exportiert.

Templates

Noch keine Templates dokumentiert.