Angular PrimeNG Styling of AvatarGroup

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Styling of AvatarGroup.

The AvatarGroup Component is used to group avatars together. The PrimeNG AvatarGroup component has only one structural style class named p-avatar-group. This class will be applied to the avatar group container element and can be used to change the CSS properties according to our needs.

Syntax:

<p-avatarGroup>
   <p-avatar icon="..."></p-avatar>
   <p-avatar icon="..."></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 changed the background color of the avatar group container using the p-avatar-group style class.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG AvatarGroup Styling</h3>

<p-avatarGroup>
    <p-avatar
        icon="pi pi-star"
        shape="circle"
        size="large">
    </p-avatar>
    <p-avatar
        icon="pi pi-user"
        shape="circle"
        size="large">
    </p-avatar>
    <p-avatar
        icon="pi pi-key"
        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 { }

styles.css

.p-avatar-group{
    padding: 30px;
    background-color: green;
}

Output:

Example 2: This is another example illustrating the use of the p-avatar-group style class used to modify various CSS properties of the avatar group container.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG AvatarGroup Styling</h3>

<p-avatarGroup>
    <p-avatar
        icon="pi pi-star"
        shape="circle"
        size="large">
    </p-avatar>
    <p-avatar
        icon="pi pi-user"
        shape="circle"
        size="large">
    </p-avatar>
    <p-avatar
        icon="pi pi-key"
        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 { }

styles.css

.p-avatar-group{
    padding: 30px;
    background-color: orange;
    border: 10px dashed green;
    border-radius: 25px;
}

Output:

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