ngx-avatar-letters

Angular component to generate avatar initials with configurable styles.

✨ Major Features

✅ Generates initials automatically
✅ Customizable size, colors, shape
✅ Fallback to initials if no image provided
✅ Lightweight and zero dependencies
✅ Works with Standalone Components and NgModules

🚀 Installation

Install the package via npm:

npm install --save ngx-avatar-letters

or with yarn:

yarn add ngx-avatar-letters

⚙️ Basic Usage

Import the Component

If you’re using Angular standalone components:

import { AvatarLettersComponent } from 'ngx-avatar-letters';

@Component({
  standalone: true,
  imports: [AvatarLettersComponent],
  template: `
    <ngx-avatar-letters [config]="avatarConfig"></ngx-avatar-letters>
  `,
})
export class DemoComponent {
  avatarConfig = {
    name: 'José Leonardo Matiz',
    size: 60,
    shape: 'circle',
    bgColor: '#3f51b5',
    textColor: '#fff',
    imageUrl: ''
  };
}

Or import the module in your NgModule:

import { NgxAvatarLettersModule } from 'ngx-avatar-letters';

@NgModule({
  imports: [NgxAvatarLettersModule],
})
export class AppModule {}

Template

<ngx-avatar-letters [config]="avatarConfig"></ngx-avatar-letters>

And in your component:

avatarConfig = {
  name: 'José Leonardo Matiz',
  size: 60,
  shape: 'circle',
  bgColor: '#3f51b5',
  textColor: '#fff',
  imageUrl: ''
};

📦 Component API

The component accepts a single input called config of type AvatarConfig:

export interface AvatarConfig {
  /** Full name to generate initials */
  name: string;
  /** Size in pixels (default: 40) */
  size?: number;
  /** Background color (default: random) */
  bgColor?: string;
  /** Text color (default: #fff) */
  textColor?: string;
  /** Shape: 'circle' or 'square' (default: 'circle') */
  shape?: 'circle' | 'square';
  /** Optional image URL */
  imageUrl?: string;
}

🎯 Compatibility

Angular 17+

Modern browsers

📦 License

MIT © 2025

☕ Buy Me a Coffee

If you find this library helpful, you can support my work:

👉 Buy Me a Coffee

🔑 Keywords

angular, ngx, avatar, avatars, avatar initials, initials, avatar letters, letter avatar, ngx-avatar, angular avatar, angular avatar letters, user avatar, profile avatar, dynamic avatar, avatar generator, angular component, angular standalone, ngx library, angular library, ui component, ngmodule, standalone component, image fallback, random color avatar, avatar image, ng avatar