Angular Avatar Component | ng-hub-ui-avatar
Angular avatar component with initials, fallback images, presence badges and CSS variables for reusable user identity interfaces.
Overview
Why teams search for this library
Choose this Angular avatar component when you need resilient user identity UI with fallbacks, initials, multiple image providers and design-system friendly styling hooks.
Install
npm install ng-hub-ui-avatarJump to
Ideal for
- user menus
- team lists
- activity feeds
- profile cards
About avatar
ng-hub-ui-avatar helps Angular applications display users consistently across menus, profile cards and collaborative interfaces. It covers the common edge cases such as missing images, initials generation, status indicators and shared sizing rules.
Feature guides
Avatar Sources
Resolve avatars from social profiles, custom images, name initials or a custom value, with automatic fallback.
Examples:
Facebook Profile
Facebook Profile
Gravatar
Gravatar
GitHub Profile
GitHub Profile
Custom Image Source
Custom Image Source
Name Initials
Name Initials
Value Display
Value Display
Fallback System
Gracefully degrade through every configured source until a meaningful representation is shown.
Examples:
Fallback System
Fallback System
Showing GitHub source (Facebook ID invalid)
Sizing
Control avatar dimensions, the text-to-size ratio and how many initials are rendered.
Examples:
Custom Size
Custom Size
Text Size Ratio
Text Size Ratio
Initials Size Limit
Initials Size Limit
Styling
Shape, corner radius, colours, borders and arbitrary inline styles — all driven by inputs and CSS variables.
Examples:
Round Avatar
Round Avatar
Corner Radius
Corner Radius
Background & Foreground Color
Background & Foreground Color
Border Color
Border Color
Custom Styles
Custom Styles
Interactivity
React to user interaction with the avatar click event.
Examples:
Click Event Handler
Click Event Handler
Groups & badge
Stack avatars into a group, and overlay a corner badge — a presence dot or a labelled count — coloured by the semantic palette.
Examples:
Avatar Group Display
Avatar Group Display
Badge (dot & count)
Badge (dot & count)
Custom content
Project any icon, inline SVG, image or emoji inside the avatar. It is centered, padded and clipped to the avatar shape, sized agnostically (font icons scale, SVG/images fill) and themed with the regular bgColor / fgColor inputs.
Examples:
Custom content (icons, SVG)
Custom content (icons, SVG)
Key features
Recent changes
Version 19.0.3 - 9/15/24, 12:00 AM
added: Comprehensive documentation page with functional examples