Angular PrimeNG Avatar Component - GeeksforGeeks

24 Aug, 2021
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 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 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
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
Angular-PrimeNG
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Angular 10 (blur) Event
Angular PrimeNG Dropdown Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript