Angular PrimeNG Properties of Avatar

Last Updated : 03 Oct, 2022

Angular PrimeNG is an open-source library that consists 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 see the Angular PrimeNG Properties of Avatar.

The Avatar Component is used to represent avatars of people using labels, icons, and images. The use of avatars increases the simplicity of the design and makes it user-friendly.

Angular PrimeNG Avatar Properties:

label: It defines the text to display in the avatar. It is of type string and the default value is null.
icon: It defines the icon to display in the avatar. it is of type string and the default value is null.
image: It is used to define the URL of the image to display as an avatar. It is of type string and the default value is null.
size: It tells the size of the avatar. Accepted values are “large” and “xlarge”.
shape: It tells the shape of the avatar. Accepted values are “square” and “circle”.
style: It is the inline style of the component.
styleClass: It is the style class of the component.

Syntax:

<p-avatar 
    icon="pi pi-star" 
    shape="circle" 
    size="large"
    ...
    >
</p-avatar>

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 icon and the size properties of the avatar to display icons as avatars.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1> 
<h3>Angular PrimeNG Avatar Properties</h3> 
  
<p-avatar icon="pi pi-cog" size="large"> 
</p-avatar> 
<p-avatar icon="pi pi-lock" size="large"> 
</p-avatar> 
<p-avatar icon="pi pi-lock-open" size="large"> 
</p-avatar>

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'; 
  
@NgModule({ 
    declarations: [ 
        AppComponent, 
    ], 
    imports: [ 
        BrowserModule, 
        AvatarModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

Output:

Example 2: In this example, we used the shape property of the avatar to make the avatar rounded and the label property to use text as avatars.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1> 
<h3>Angular PrimeNG Avatar Properties</h3> 
  
<p-avatar label="V" size="large" shape="circle"> 
</p-avatar> 
<p-avatar label="P" size="large" shape="circle"> 
</p-avatar> 
<p-avatar label="S" size="large" shape="circle"> 
</p-avatar>

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'; 
  
@NgModule({ 
    declarations: [ 
        AppComponent, 
    ], 
    imports: [ 
        BrowserModule, 
        AvatarModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }