Angular PrimeNG AvatarGroup

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 { }

Output:

Reference: http://primefaces.org/primeng/avatar