API reference

Here's the full contract for avatar: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial avatar in with 20 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`size`	`string \| number`	`50`	Avatar size in pixels
`name`	`string`	—	User name for generating initials when image sources fail
`src`	`string \| SafeUrl`	—	Primary custom image source URL for the avatar
`alt`	`string`	—	Alternative text for the avatar image for accessibility
`round`	`boolean`	`true`	Whether the avatar should be circular (true) or follow cornerRadius
`bgColor`	`string`	—	Background color for text avatars. Auto-generated if not provided
`autoColor`	`boolean`	`true`	When `true` (default) an initials avatar derives its background from a hash of the name. Set to `false` to theme it through the `--hub-avatar-bg-color` variable instead; an explicit `bgColor` always wins.
`fgColor`	`string`	`#FFF`	Text color for initials in text avatars
`borderColor`	`string`	—	Border color around the avatar
`cornerRadius`	`string \| number`	`0`	Corner radius when round is false
`textSizeRatio`	`number`	`3`	Ratio to calculate text size from avatar size (size / textSizeRatio)
`initialsSize`	`string \| number`	`0`	Restricts the number of initials displayed (0 = no restriction)
`facebookId`	`string`	—	Facebook user ID for profile picture (best-effort, API restrictions may apply)
`githubId`	`string`	—	GitHub username for fetching profile picture
`gravatarId`	`string`	—	Gravatar email or MD5 hash for fetching profile picture
`value`	`string`	—	Display a custom value as avatar (e.g., "75%", "+5")
`style`	`Partial<CSSStyleDeclaration>`	—	Custom styles to apply to the avatar root element
`referrerpolicy`	`string`	—	Referrer policy for the avatar image (e.g., "no-referrer")
`badge`	`string \| number \| boolean \| null`	—	Corner overlay: `badge` / `[badge]="true"` → a dot; `badge="4k"` → a labelled pill; null / absent → nothing.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	—	Semantic colour of the badge (primary · secondary · success · danger · warning · info · light · dark) → `--hub-sys-color-*`.

Outputs

React to what avatar does — 1 events to hook your logic onto.

Name	Type	Description
`clickOnAvatar`	`Source`	Emitted when avatar is clicked, returns the current active source object

Templates

No templates documented yet.