Referencia API

Aquí tienes el contrato completo de avatar: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta avatar a tu gusto con 22 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`size`	`string \| number`	`50`	Tamaño del avatar: un número suelto son píxeles; cualquier longitud CSS (1.75rem, 50%, calc(2rem + 12px)) se pinta tal cual
`name`	`string \| null`	—	Nombre de usuario para generar iniciales cuando fallan las fuentes de imagen
`src`	`string \| SafeUrl \| null`	—	URL de la fuente de imagen personalizada principal para el avatar
`alt`	`string \| null`	—	Texto alternativo para la imagen del avatar, por accesibilidad
`round`	`boolean`	`true`	Indica si el avatar debe ser circular (true) o seguir cornerRadius
`interactive`	`boolean`	`false`	Marca el avatar como control interactivo: expone role=“button”, lo hace enfocable y dispara clickOnAvatar con Enter/Space. Actívalo siempre que enlaces (clickOnAvatar).
`bgColor`	`string`	—	Color de fondo para los avatares de texto. Se genera automáticamente si no se proporciona
`autoColor`	`boolean`	`true`	Cuando es `true` (por defecto) un avatar de iniciales deriva su fondo de un hash del nombre. Ponlo a `false` para tematizarlo con la variable `--hub-avatar-bg-color`; un `bgColor` explícito siempre prevalece.
`fgColor`	`string \| undefined`	—	Color de las iniciales y del contenido proyectado. Si no se indica, el avatar elige negro o blanco según el fondo, el que llegue al mínimo de contraste de la WCAG; un valor explícito manda siempre, con contraste o sin él.
`borderColor`	`string`	—	Color del borde alrededor del avatar
`cornerRadius`	`string \| number`	`0`	Radio de las esquinas cuando round es false
`textSizeRatio`	`number`	`3`	Proporción para calcular el tamaño del texto a partir del tamaño del avatar (size / textSizeRatio)
`initialsSize`	`string \| number`	`0`	Limita el número de iniciales mostradas (0 = sin restricción)
`facebookId`	`string \| null`	—	ID de usuario de Facebook para la foto de perfil (al mejor esfuerzo, pueden aplicarse restricciones de la API)
`githubId`	`string \| null`	—	Nombre de usuario de GitHub para obtener la foto de perfil
`gravatarId`	`string \| null`	—	Email o hash MD5 de Gravatar para obtener la foto de perfil
`value`	`string \| null`	—	Muestra un valor personalizado como avatar (p. ej., "75%", "+5")
`style`	`Record<string, string \| number \| null \| undefined> \| string`	—	Estilos en línea combinados con el contenido renderizado: la imagen, las iniciales o el hueco del contenido proyectado. Acepta un objeto de estilos o una cadena CSS; nunca llega al elemento anfitrión
`referrerpolicy`	`string \| null`	—	Política de referrer para la imagen del avatar (p. ej., "no-referrer")
`placeholder`	`string`	—	Imagen de último recurso: se pinta solo mientras no hay nada más — ninguna fuente resuelta, ninguna declarada o una todavía cargando — y tampoco hay iniciales. Nunca entra en la cadena de reserva, así que no puede adelantar a las iniciales como sí haría `src`.
`badge`	`string \| number \| boolean \| null`	`null`	Superposición en la esquina: `badge` / `[badge]="true"` → punto; `badge="4k"` → etiqueta; null / ausente → nada.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	`null`	Color semántico del badge (primary · secondary · success · danger · warning · info · light · dark) → `--hub-sys-color-*`.

Outputs

Reacciona a lo que hace avatar: 1 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`clickOnAvatar`	`OutputEmitterRef<Source \| null>`	Se emite al hacer clic, y con Enter/Espacio cuando `interactive` está activo. Lleva la fuente que pinta el avatar —su `sourceType`, su `sourceId` y `getAvatar(size)`— o null si ninguna se ha resuelto. `Source` se exporta desde el paquete, así que el manejador puede nombrar el tipo en vez de recurrir a any

Métodos

Controla avatar desde el código — 1 métodos en su superficie programática.

Nombre	Firma	Devuelve	Descripción
`Source.getAvatar`	`getAvatar(size: number): string`	`string`	Resuelve lo que pinta la fuente en un tamaño dado: la URL de la imagen si la fuente es remota, y las iniciales o el texto si es local. `Source` es la carga de `clickOnAvatar` y se exporta desde el paquete.

Templates

Todavía no hay templates documentados.