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 22 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`size`	`string \| number`	`50`	Avatar size: a bare number is pixels; any CSS length (1.75rem, 50%, calc(2rem + 12px)) is painted as written
`name`	`string \| null`	—	User name for generating initials when image sources fail
`src`	`string \| SafeUrl \| null`	—	Primary custom image source URL for the avatar
`alt`	`string \| null`	—	Alternative text for the avatar image for accessibility
`round`	`boolean`	`true`	Whether the avatar should be circular (true) or follow cornerRadius
`interactive`	`boolean`	`false`	Marks the avatar as an interactive control: exposes role=“button”, makes it focusable and fires clickOnAvatar with Enter/Space. Enable it whenever you bind (clickOnAvatar).
`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 \| undefined`	—	Colour of the initials and of projected content. Leave it unset and the avatar picks black or white per background, whichever clears WCAG AA; an explicit value always wins, contrast or not.
`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 \| null`	—	Facebook user ID for profile picture (best-effort, API restrictions may apply)
`githubId`	`string \| null`	—	GitHub username for fetching profile picture
`gravatarId`	`string \| null`	—	Gravatar email or MD5 hash for fetching profile picture
`value`	`string \| null`	—	Display a custom value as avatar (e.g., "75%", "+5")
`style`	`Record<string, string \| number \| null \| undefined> \| string`	—	Inline styles merged into the rendered content — the image, the initials or the projected-content slot. Accepts a style object or a CSS string; it never reaches the host element
`referrerpolicy`	`string \| null`	—	Referrer policy for the avatar image (e.g., "no-referrer")
`placeholder`	`string`	—	Picture of last resort: painted only while nothing else is — no source resolved, none was declared, or one is still loading — and there are no initials either. It never joins the fallback chain, so it cannot outrank the initials the way `src` would.
`badge`	`string \| number \| boolean \| null`	`null`	Corner overlay: `badge` / `[badge]="true"` → a dot; `badge="4k"` → a labelled pill; null / absent → nothing.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	`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`	`OutputEmitterRef<Source \| null>`	Emitted on click, and on Enter/Space when `interactive` is set. Carries the source painting the avatar — its `sourceType`, its `sourceId` and `getAvatar(size)` — or null when none has resolved. `Source` is exported from the package, so the handler can name the type instead of falling back to any

Methods

Drive avatar from code — 1 methods on its programmatic surface.

Name	Signature	Returns	Description
`Source.getAvatar`	`getAvatar(size: number): string`	`string`	Resolves what the source paints at a given size: the picture URL for a remote source, the initials or the plain text for a local one. `Source` is the payload of `clickOnAvatar` and is exported from the package.

Templates

No templates documented yet.