Angular Avatar-Komponente | ng-hub-ui-avatar
Angular Avatar-Komponente mit Initialen, Fallback-Bildern, Präsenz-Badges und CSS-Variablen für wiederverwendbare Oberflächen zur Benutzeridentität.
Zuletzt aktualisiert 18.08.2026
Übersicht
Warum Teams nach dieser Bibliothek suchen
Wähle diese Angular Avatar-Komponente, wenn du eine robuste Benutzeridentitäts-Oberfläche mit Fallbacks, Initialen, mehreren Bildquellen und design-system-freundlichen Styling-Hooks brauchst.
Installieren
npm install ng-hub-ui-avatarSpringen zu
Ideal für
- Benutzermenüs
- Teamlisten
- Aktivitäts-Feeds
- Profilkarten
Über avatar
ng-hub-ui-avatar hilft Angular-Anwendungen, Benutzer konsistent über Menüs, Profilkarten und kollaborative Oberflächen hinweg darzustellen. Es deckt die üblichen Sonderfälle wie fehlende Bilder, Generierung von Initialen, Statusindikatoren und gemeinsame Größenregeln ab.
Funktionsleitfäden
Avatar-Quellen
Lösen Sie Avatare aus sozialen Profilen, benutzerdefinierten Bildern, Namensinitialen oder einem benutzerdefinierten Wert auf, mit automatischem Fallback.
Beispiele:
Facebook-Profil
Facebook-Profil
Gravatar
Gravatar
GitHub-Profil
GitHub-Profil
Benutzerdefinierte Bildquelle
Benutzerdefinierte Bildquelle
Namensinitialen
Namensinitialen
Wertanzeige
Wertanzeige
Fallback-System
Degradieren Sie elegant durch jede konfigurierte Quelle, bis eine sinnvolle Darstellung angezeigt wird.
Beispiele:
Fallback-System
Fallback-System
Showing GitHub source (Facebook ID invalid)
Größenanpassung
Steuern Sie die Avatar-Abmessungen, das Verhältnis von Text zu Größe und wie viele Initialen gerendert werden.
Beispiele:
Benutzerdefinierte Größe
Benutzerdefinierte Größe
Textgrößenverhältnis
Textgrößenverhältnis
Größenbeschränkung der Initialen
Größenbeschränkung der Initialen
Styling
Form, Eckenradius, Farben, Rahmen und beliebige Inline-Styles — alle über Inputs und CSS-Variablen gesteuert.
Beispiele:
Runder Avatar
Runder Avatar
Eckenradius
Eckenradius
Hintergrund- & Vordergrundfarbe
Hintergrund- & Vordergrundfarbe
--hub-avatar-bg-color ([autoColor]="false")Rahmenfarbe
Rahmenfarbe
Benutzerdefinierte Stile
Benutzerdefinierte Stile
Interaktivität
Reagieren Sie auf Benutzerinteraktionen mit dem Avatar-Click-Event.
Beispiele:
Klick-Ereignishandler
Klick-Ereignishandler
Gruppen & Badge
Avatare zu einer Gruppe stapeln und ein Eck-Badge einblenden — ein Präsenzpunkt oder ein Zähler — eingefärbt aus der semantischen Palette.
Beispiele:
Avatar-Gruppenanzeige
Avatar-Gruppenanzeige
Badge (Punkt & Zähler)
Badge (Punkt & Zähler)
Eigener Inhalt
Projiziere ein beliebiges Icon, ein Inline-SVG, ein Bild oder ein Emoji in den Avatar. Es wird zentriert, mit Innenabstand versehen und auf die Avatar-Form beschnitten, agnostisch skaliert (Icon-Fonts skalieren, SVG/Bilder füllen) und über die üblichen bgColor- / fgColor-Inputs thematisiert.
Beispiele:
Eigener Inhalt (Icons, SVG)
Eigener Inhalt (Icons, SVG)
Hauptfunktionen
Letzte Änderungen
Version 22.9.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.9.0 - 7/28/26, 12:00 AM
changed: Accent resolution now imports the canonical resolveHubAccent from ng-hub-ui-utils. The private copy under src/lib/shared/resolve-hub-accent.ts has been deleted in favour of the single, tested implementation shared family-wide. Behaviour is identical (the copy had not diverged): a bareword resolves to var(--hub-sys-color-<name>, <name>), a literal colour passes through unchanged, an empty value yields null.
added: NEW peer dependency: ng-hub-ui-utils >=22.7.0. Consumers must have ng-hub-ui-utils installed alongside this library (it is where resolveHubAccent lives). Users installing via ng add ng-hub-ui-installer get it automatically; manual installs need npm i ng-hub-ui-utils.
Version 22.8.0 - 7/28/26, 12:00 AM
added: interactive input: exposes role=button, focusability and Enter/Space activation for avatars that bind (clickOnAvatar) — the click target used to be mouse-only.
Version 22.6.0 - 7/7/26, 12:00 AM
added: autoColor input — set [autoColor]="false" on an initials avatar to suppress the inline hash background so it can be themed via the --hub-avatar-bg-color CSS variable (no !important). Defaults to true; an explicit bgColor still wins.
Version 22.5.0 - 6/30/26, 12:00 AM
added: Standalone AvatarComponent — import it directly (no NgModule) and configure with the new provideAvatar() environment provider.
deprecated: AvatarModule / AvatarModule.forRoot() — kept for backward compatibility (now re-exporting the standalone component); use AvatarComponent + provideAvatar() instead.