Componente Avatar para Angular | ng-hub-ui-avatar
Componente avatar para Angular con iniciales, imágenes fallback, badges de presencia y variables CSS para interfaces reutilizables de identidad de usuario.
Última actualización 18 ago 2026
Visión General
Por qué los equipos buscan esta librería
Elige este componente avatar para Angular cuando necesites una interfaz robusta de identidad de usuario con fallbacks, iniciales, múltiples proveedores de imagen y ganchos de estilo pensados para design systems.
Instalación
npm install ng-hub-ui-avatarIr a
Ideal para
- menús de usuario
- listas de equipo
- feeds de actividad
- tarjetas de perfil
Sobre avatar
ng-hub-ui-avatar ayuda a las aplicaciones Angular a mostrar usuarios de forma consistente en menús, tarjetas de perfil e interfaces colaborativas. Cubre los casos habituales como imágenes rotas, generación de iniciales, indicadores de estado y reglas compartidas de tamaño.
Guías de uso
Fuentes de avatar
Resuelve avatares a partir de perfiles sociales, imágenes personalizadas, iniciales del nombre o un valor personalizado, con fallback automático.
Ejemplos:
Perfil de Facebook
Perfil de Facebook
Gravatar
Gravatar
Perfil de GitHub
Perfil de GitHub
Fuente de imagen personalizada
Fuente de imagen personalizada
Iniciales del nombre
Iniciales del nombre
Visualización de valor
Visualización de valor
Sistema de fallback
Degrada con elegancia a través de cada fuente configurada hasta mostrar una representación significativa.
Ejemplos:
Sistema de fallback
Sistema de fallback
Showing GitHub source (Facebook ID invalid)
Dimensionado
Controla las dimensiones del avatar, la proporción entre texto y tamaño y cuántas iniciales se renderizan.
Ejemplos:
Tamaño personalizado
Tamaño personalizado
Proporción del tamaño de texto
Proporción del tamaño de texto
Límite de iniciales
Límite de iniciales
Estilizado
Forma, radio de esquina, colores, bordes y estilos en línea arbitrarios, todo controlado mediante inputs y variables CSS.
Ejemplos:
Avatar redondo
Avatar redondo
Radio de esquinas
Radio de esquinas
Color de fondo y de primer plano
Color de fondo y de primer plano
--hub-avatar-bg-color ([autoColor]="false")Color del borde
Color del borde
Estilos personalizados
Estilos personalizados
Interactividad
Reacciona a la interacción del usuario con el evento de clic del avatar.
Ejemplos:
Manejador del evento de clic
Manejador del evento de clic
Grupos y badge
Apila avatares en un grupo y superpón un badge en la esquina — un punto de presencia o un contador — coloreado con la paleta semántica.
Ejemplos:
Visualización de grupo de avatares
Visualización de grupo de avatares
Badge (punto y contador)
Badge (punto y contador)
Contenido personalizado
Proyecta cualquier icono, SVG en línea, imagen o emoji dentro del avatar. Se centra, espacia y recorta a la forma del avatar, se dimensiona de forma agnóstica (los iconos de fuente escalan, los SVG/imágenes rellenan) y se tematiza con los inputs habituales bgColor / fgColor.
Ejemplos:
Contenido personalizado (iconos, SVG)
Contenido personalizado (iconos, SVG)
Características clave
Cambios recientes
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.