Angular PrimeNG AvatarGroup

Last Updated : 29 Sep, 2022

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will be seeing Angular PrimeNG AvatarGroup.

The AvatarGroup Component is used to group avatars together. It creates a container for the avatars with the display property set to flex and items aligned to the center.

Syntax:

<p-avatarGroup>
    <p-avatar icon="pi pi-search"></p-avatar>
    <p-avatar icon="pi pi-hashtag"></p-avatar>
    <p-avatar icon="pi pi-circle"></p-avatar>
    ...
</p-avatarGroup>

Creating Angular Application and Installing the Modules:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we used the avatar group component to group three icon avatars together.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1> 
<h3>Angular PrimeNG AvatarGroup</h3> 
  
<p-avatarGroup> 
    <p-avatar 
        icon="pi pi-search" 
        shape="circle" 
        size="large"> 
    </p-avatar> 
    <p-avatar 
        icon="pi pi-hashtag" 
        shape="circle" 
        size="large"> 
    </p-avatar> 
    <p-avatar 
        icon="pi pi-circle" 
        shape="circle" 
        size="large"> 
    </p-avatar> 
</p-avatarGroup>

app.component.ts

import { Component } from '@angular/core'; 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styles: [] 
}) 
export class AppComponent { 
      
} 

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
  
import { AvatarModule } from 'primeng/avatar'; 
import { AvatarGroupModule } from 'primeng/avatargroup'; 
  
@NgModule({ 
    declarations: [ 
        AppComponent, 
    ], 
    imports: [ 
        BrowserModule, 
        AvatarModule, 
        AvatarGroupModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Output:

Example 2: In this example, we used the avatar group to group two image avatars together.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1> 
<h3>Angular PrimeNG AvatarGroup</h3> 
  
<p-avatarGroup> 
    <p-avatar 
        shape="circle"
        size="large"
        image="https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png"> 
    </p-avatar> 
    <p-avatar 
        shape="circle"
        size="large"
        image="https://media.geeksforgeeks.org/wp-content/uploads/20220310125926/gfglogo.jpg"> 
    </p-avatar> 
</p-avatarGroup>

app.component.ts

import { Component } from '@angular/core'; 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styles: [] 
}) 
export class AppComponent { 
      
} 

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
  
import { AvatarModule } from 'primeng/avatar'; 
import { AvatarGroupModule } from 'primeng/avatargroup'; 
  
@NgModule({ 
    declarations: [ 
        AppComponent, 
    ], 
    imports: [ 
        BrowserModule, 
        AvatarModule, 
        AvatarGroupModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 