API reference
The headless Avatar primitive is intentionally small. It gives you stable slot markers and nothing more: no inputs, no outputs, and no built-in fallback behavior.
Directives
Use the host directive on any wrapper element, the image directive on an img, and the fallback directive on any element that should appear when the image is unavailable.
Supported selectors
html
<span tngAvatar></span>
<img tngAvatarImage />
<span tngAvatarFallback></span>
Slot contract
| Directive | Selector | Reflected hook | Purpose |
|---|---|---|---|
TngAvatar | [tngAvatar] | data-slot="avatar" | Avatar frame or host element. |
TngAvatarImage | img[tngAvatarImage] | data-slot="avatar-image" | Image node for the visual source. |
TngAvatarFallback | [tngAvatarFallback] | data-slot="avatar-fallback" | Fallback initials, icon, or decorative surface. |
Owner responsibilities
You decide when fallback is visible, what alt text is used, and how the avatar is sized or shaped. The primitive does not manage image-error state, hidden toggling, or initials.
Manual fallback state
ts
protected readonly src = signal<string | null>(profileUrl);
protected readonly imageLoadFailed = signal(false);
protected showFallback(): boolean {
return this.src() === null || this.imageLoadFailed();
}