Avatar

Name: ng-oat
Author: SashiKumar Yadav

Circular user avatar with image, initials fallback, and group support.

Input	Type	Default	Description
`src`	`string`	`''`	Image URL
`alt`	`string`	`''`	Alt text for the image
`initials`	`string`	`''`	Initials to show when no image
`fallback`	`string`	`''`	Fallback text (first 2 chars used)
`size`	`'sm' \| 'default' \| 'lg' \| 'xl'`	`'default'`	Avatar size
`status`	`'online' \| 'away' \| 'busy' \| 'offline' \| ''`	`''`	Optional presence indicator

Import & Usage

typescript

import { Component } from '@angular/core';
import { NgOatAvatar } from '@letsprogram/ng-oat/avatar';

@Component({
  selector: 'app-example',
  imports: [NgOatAvatar],
  template: `
    <ng-oat-avatar src="https://example.com/photo.jpg" alt="Jane Doe" size="lg" />
    <ng-oat-avatar initials="JD" />
    <ng-oat-avatar fallback="Alice" />
  `,
})
export class ExampleComponent {}

Sizes

html

<ng-oat-avatar initials="SM" size="sm" />
<ng-oat-avatar initials="DF" />
<ng-oat-avatar initials="LG" size="lg" />
<ng-oat-avatar initials="XL" size="xl" />

Image with Fallback

html

<ng-oat-avatar src="https://i.pravatar.cc/80?img=1" alt="Jane Doe" size="lg" />
<ng-oat-avatar src="https://i.pravatar.cc/80?img=2" alt="John Smith" size="lg" />
<!-- Broken URL falls back to initials from alt text -->
<ng-oat-avatar src="https://invalid-url.example/404.jpg" alt="Broken Image" size="lg" />

Initials Fallback

html

<ng-oat-avatar initials="JD" size="lg" />
<ng-oat-avatar fallback="Alice" size="lg" />
<!-- Auto-generates initials from alt text -->
<ng-oat-avatar alt="Bob Williams" size="lg" />

Avatar Group

html

<div class="avatar-group">
  <ng-oat-avatar src="https://i.pravatar.cc/80?img=3" alt="User 1" />
  <ng-oat-avatar src="https://i.pravatar.cc/80?img=4" alt="User 2" />
  <ng-oat-avatar src="https://i.pravatar.cc/80?img=5" alt="User 3" />
  <ng-oat-avatar initials="+3" />
</div>

Presence

html

<ng-oat-avatar initials="ON" status="online" />
<ng-oat-avatar initials="AW" status="away" />
<ng-oat-avatar initials="BU" status="busy" />
<ng-oat-avatar initials="OF" status="offline" />