Angular PrimeNG Avatar Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Avatar component in Angular PrimeNG. Let’s learn about the properties, styling & their syntaxes that will be used in the code.

Avatar component: It is used to represent a person as an icon, image or label.

Properties of Avatar:

• label: It is used to define the text to display. It is of string data type, the default value is null.
• icon: It is used to define the icon to display. It is of string data type, the default value is null.
• image: It is used to define the image to display. It is of string data type, the default value is null.
• size: It is used to set the size of the element, valid options are “large” and “xlarge”. It is of string data type, the default value is null.
• shape: It is used to set the shape of the element, valid options are “square” and “circle”. It is of string data type, the default value is square.
• style: It is used to set the inline style of the component. It is of object data type, the default value is null.
• styleClass: It is used to define the style class of the component. It is of string data type, the default value is null.

Properties for AvatarGroup:

• style: Here, in this case also, is used to set the inline style of the component. It is of object data type, the default value is null.
• styleClass: Here, in this case also, is used to define the style class of the component. It is of string data type, the default value is null.

Styling of Avatar:

• p-avatar: It is the container element.
• p-avatar-image: It is the container element in image mode.
• p-avatar-circle: It is the container element with a circle shape.
• p-avatar-text: It is the text element of the avatar.
• p-avatar-icon: It is the style icon of the avatar.
• p-avatar-lg: It is the container element with large size.
• p-avatar-xl: It is the container element with an xlarge size.

Styling of AvatarGroup:

• p-avatar-group: It is used for the container of an element.

Creating Angular application & module installation:

• 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: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

Example 1: This is the basic example that shows how to use the avatar component.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>PrimeNg Avatar Component</h5>
<p-avatar label="A" styleClass="p-mr-1"></p-avatar>
<p-avatar
  label="B"
  styleClass="p-mr-1"
  size="large"
  [style]="{'background-color':'#3714e3', 'color': '#ffffff'}">
</p-avatar>

<p-avatar
  label="C"
  styleClass="p-mr-1"
  size="xlarge"
  [style]="{'background-color':'#1eff00', 'color': '#ff8400'}">
</p-avatar>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { AvatarModule } from "primeng/avatar";

@NgModule({
  imports: [BrowserModule,
              BrowserAnimationsModule,
            AvatarModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 2: In this example, we will be making circle-shaped avatars with icons.

app.component.html

<div class="card">
  <h5>Circle shaped avatar with icon</h5>
  <div>
    <p-avatar
      icon="pi pi-user"
      size="small"
      [style]="{'background-color': 'red', 'color': '#ffffff'}"
      shape="circle">
    </p-avatar>
  </div>
  <div>
    <p-avatar
      icon="pi pi-user"
      [style]="{'background-color': 'black', 'color': '#ffffff'}"
      shape="circle">
    </p-avatar>
  </div>
  <div>
    <p-avatar
      icon="pi pi-user"
      size="large"
      [style]="{'background-color':'green', 'color': '#ffffff'}"
      shape="circle">
    </p-avatar>
  </div>
  <div>
    <p-avatar icon="pi pi-user" size="xlarge" shape="circle"></p-avatar>
  </div>
</div>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { AvatarModule } from "primeng/avatar";

@NgModule({
  imports: [BrowserModule,
              BrowserAnimationsModule,
            AvatarModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Reference: https://primefaces.org/primeng/showcase/#/avatar