Angular PrimeNG Styling of Avatar

Last Updated : 29 Sep, 2022

Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will be discussing Angular PrimeNG Styling of Avatar.

The Avatar component is used to represent a person or entity using icons, images, or labels. The use of an avatar makes the design more engaging and eye-pleasing.

Angular PrimeNG Avatar Styling Classes:

p-avatar: This class is applied to the container element of the avatar.
p-avatar-image: This class is applied to the container element of the avatar when in image mode.
p-avatar-circle: This class is applied to the container element of the avatar when in a circle shape.
p-avatar-text: This class is applied to the text of the avatar.
p-avatar-icon: This class is applied to the icon of the avatar.
p-avatar-lg: This class is applied to the container element of the avatar when it is large in size.
p-avatar-xl: This class is applied to the container element of the avatar when it is extra large in size.

Syntax:

// In app.component.css

:host ::ng-deep .Styling-Class {
    // CSS styling
}

Creating Angular Application and Installing the Module:

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 p-avatar class to apply a border along all the avatar components.

app.component.html

<h1 style="color:green"> 
    GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG Styling of Avatar</h3> 
  
<p-avatar label="V" 
          shape="circle" 
          class="mr-2"> 
</p-avatar> 
  
<p-avatar label="P" 
          shape="circle" 
          class="mr-2"> 
</p-avatar> 
  
<p-avatar label="S" 
          shape="circle" 
          class="mr-2"> 
</p-avatar>

app.component.css

:host ::ng-deep .p-avatar { 
    border: 2px solid green; 
}

app.component.ts

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

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpClientModule } from '@angular/common/http'; 
import { BrowserAnimationsModule }  
from '@angular/platform-browser/animations'; 
  
import { AppComponent } from './app.component'; 
import { FormsModule } from '@angular/forms'; 
import { AvatarModule } from 'primeng/avatar'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        HttpClientModule, 
        FormsModule, 
        AvatarModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

Output:

Example 2: In this example, we changed the background color of the circle avatar to green and others to red color. Here we used the p-avatar and p-avatar-circle styling classes.

app.component.html

<h1 style="color:green"> 
    GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG Styling of Avatar</h3> 
  
<p-avatar label="V" 
          class="mr-2"> 
</p-avatar> 
  
<p-avatar label="P" 
          class="mr-2"> 
</p-avatar> 
  
<p-avatar label="S" 
          shape="circle" 
          class="mr-2"> 
</p-avatar> 
  
<p-avatar label="O" 
          shape="circle" 
          class="mr-2"> 
</p-avatar> 
  
<p-avatar label="P" 
          class="mr-2"> 
</p-avatar>

app.component.css

:host ::ng-deep .p-avatar{ 
    background-color: red; 
    color: white; 
} 
:host ::ng-deep .p-avatar.p-avatar-circle{ 
    background-color: green; 
    color: white; 
}

app.component.ts

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

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpClientModule } from '@angular/common/http'; 
import { BrowserAnimationsModule }  
from '@angular/platform-browser/animations'; 
  
import { AppComponent } from './app.component'; 
import { FormsModule } from '@angular/forms'; 
import { AvatarModule } from 'primeng/avatar'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        HttpClientModule, 
        FormsModule, 
        AvatarModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }