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

1. Import the NgxAvatarGroupModule in the app-module

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

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

2. import the interface Avatar in the component

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

3. 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');
  }

4. 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 | |