Avatar

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

InputTypeDefaultDescription
srcstring''Image URL
altstring''Alt text for the image
initialsstring''Initials to show when no image
fallbackstring''Fallback text (first 2 chars used)
size'sm' | 'default' | 'lg' | 'xl''default'Avatar size

Import & Usage

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

@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

SMDFLGXL
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

Jane DoeJohn SmithBroken Image
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

JDALBW
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

User 1User 2User 3+3
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>