@teenageinterface/avatar NPM

Avatar Component

The Avatar component is part of the @teenageinterface Angular component library. It provides a customizable avatar component with support for images, fallback initials, and size variations.

Installation

Ensure that you have installed the @teenageinterface/avatar library in your Angular project. If not, you can add it using:

npm install @teenageinterface/avatar

Usage

Import the Avatar component module into your Angular application:

import { CommonModule } from '@angular/common';
import { AvatarComponent } from '@teenageinterface/avatar';

@Component({
  selector: 'pages-avatar',
  standalone: true,
  imports: [AvatarComponent],
  template: `
    <tiAvatar
      [imageUrl]="'https://example.com/image.jpg'"
      [fallback]="'AB'"
      [size]="'large'"
    ></tiAvatar>
  `,
})
export default class AvatarPage {}

Example

<tiAvatar
  [imageUrl]="'https://example.com/profile.jpg'"
  [fallback]="'JD'"
  [size]="'medium'"
></tiAvatar>

<tiAvatar [fallback]="'No Image'" [size]="'small'"></tiAvatar>

Properties

Property	Type	Default	Description
`imageUrl`	`string \\| null`	`null`	URL of the image to display. If invalid, the fallback is shown.
`fallback`	`string`	`'A'`	Text displayed as a fallback when the image fails to load.
`size`	`'small' \\| 'medium' \\| 'large'`	`'medium'`	Controls the size of the avatar (small, medium, or large).