Ngx-avatar-group NPM

ngx-avatar-group

Simple package to add avatars like image, letter and word in the Avatar stack

Supports Angular v12 to v17

Installation

npm i ngx-avatar-group

Usage

Import the NgxAvatarGroupModule in the app-module

import { NgxAvatarGroupModule } from 'ngx-avatar-group';

@NgModule({
  imports: [
    NgxAvatarGroupModule,
    ....
  ],
  providers: [],
  bootstrap: [AppComponent],
})

import the interface Avatar in the component

import { Avatar } from 'ngx-avatar-group';

Define the needed variables in component file

avatarList1: Avatar[] = [
    {
      id: '1',
      src: 'assets/profile-1.jpeg',
      alt: 'A',
      bgColor: '#fff453',
    },
    {
      id: '2',
      src: 'assets/profile-2.jpeg',
      alt: 'A',
      bgColor: 'green',
    },
    {
      id: '3',
      src: 'assets/profile-3.jpg',
      alt: 'A',
      bgColor: 'purple',
    },
    {
      id: '4',
      src: 'assets/profile-4.jpeg',
      alt: 'A',
      bgColor: 'yellow',
    },
    {
      id: '5',
      src: 'assets/profile-5.jpg',
      alt: 'A',
      bgColor: 'grey',
    },
    {
      id: '6',
      src: 'assets/profile-1.jpeg',
      alt: 'A',
      bgColor: 'pink',
    },

  ];

  space: number = 50;
  max: number = 5;
  size: number = 60;
  textColor: string = 'white';

  onAvatarClick(avatar: any) {
    console.log('avatar clicked', avatar);
  }

  onRemainingAvatarClick(event: any) {
    console.log('Remainig avatar clicked');
  }

Use the ngx-avatar-group component in the html file

<ngx-avatar-group
  [size]="size"
  [space]="space"
  [max]="max"
  [textColor]="textColor"
  [avatarList]="avatarList1"
  (onAvatarClick)="onAvatarClick($event)"
  (onRemainingAvatarClick)="onRemainingAvatarClick($event)"
>

Output

Using letter avatar

avatarList2: Avatar[] = [
    {
      id: '1',
      letter: 'A',
      bgColor: '#fff453',
    },
    {
      id: '2',
      letter: 'S',
      bgColor: 'green',
    },
    {
      id: '3',
      letter: 'M',
      bgColor: 'purple',
    },
    {
      id: '4',
      letter: 'R',
      bgColor: 'yellow',
    },
    {
      id: '5',
      letter: 'L',
      bgColor: 'grey',
    },
    {
      id: '6',
      letter: 'F',
      bgColor: 'pink',
    },
    ...
    ...
  ];

output

Using word avatar

avatarList3: Avatar[] = [
    {
      id: '1',
      name: 'Arun Kenjila',
      bgColor: '#8a8a62',
    },
    {
      id: '2',
      name: 'Steve Smith',
      bgColor: '#a07da0',
    },
    {
      id: '3',
      name: 'M N',
      bgColor: '#618d61',
    },
    {
      id: '4',
      name: 'Raj M Thakrey',
      bgColor: 'rgb(151 146 74)',
    },
    {
      id: '5',
      name: 'L ab',
      bgColor: 'grey',
    },
  ];

Output

Properties

Name	Descrption	Type	Default value
avatarList	List of image src, letter or words	Avatar	[]
space	Space between two avatars	number	50
max	Maximum no of avatars to be displayed	number	5
size	Width and Height of avatar	number	60
textColor	Color of text	string	black
onAvatarClick()	Method executed when any avatar is clicked	method
onRemainingAvatarClick()	Method executed when remaining avatar is clicked	method