How to get started easily with Syncfusion Angular 11 Avatar?

This article explains how to easily get started with EJ2 Avatar component in Angular 11 project with minimal code. The Essential JS2 Angular Avatar component is used to display icons or figures that represent a person. The icons and figures are used in popular media formats such as images, SVG, font icons, and letters. 

Prerequisites 

Before starting, the following tools and SDK need to be installed in your machine:

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for editor

Installation and application creation

1. You can install Angular CLI 11 using the following command.

npm install -g @angular/cli@11.2.3 

Note:

If you need to follow and run the application in Angular 9 or earlier version, replace the CLI command version with your preferred version and install it.

 npm install -g @angular/cli@<CLI VERSION>

Create an Angular 11 application

2. Create an Angular 11 application using the Angular CLI.

ng new angular11-app
cd angular11-app

3. Serve the Angular 11 application using the following command.

ng serve 

Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 11 version.

Integration of Angular Avatar component:

1. After running the Angular 11 application successfully, configure the Angular Avatar component in this application. Install Angular Layout and EJ2 package using the following command. 

npm install @syncfusion/ej2-angular-layouts --save 

Since avatar is a CSS component, you do not need to import a separate module, and only the CSS styles files need to be imported. You can add the “e-avatar” class to the element wrapping the “image” to instantly change it to Avatar.

2. Import the CSS styles of the Avatar component.

[styles.css]

@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

3. Add the Avatar component in the template file.

[app.component.html]

<div class="e-avatar">

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />

  </div> 

4. Run the application using the following command and see the following represented output of the EJ2 Angular Avatar component.

ng serve --open

Sizes

By default, Avatar supports the following five different sizes for specific situations:

• XLarge (e-avatar-xlarge)
• Large (e-avatar-xlarge)
• Normal (e-avatar)
• Small (e-avatar-small)
• XSmall (e-avatar-xsmall)

[app.component.html]

<div class="e-avatar e-avatar-xlarge">

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />

  </div>

  <div class="e-avatar e-avatar-large">

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />

  </div>

  <div class="e-avatar">

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />

  </div>

  <div class="e-avatar e-avatar-small">

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />

  </div>

  <div class="e-avatar e-avatar-xsmall">

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />

 
  </div>

Shapes

Avatar supports two types of shapes to choose: rectangular and circle. By default, the rectangular shape is enabled, and the circle shape can be enabled by specifying the “e-avatar-circle” as demonstrated in the following code sample.

[app.component.html]

<div class="e-avatar e-avatar-xlarge e-avatar-circle">

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />


  </div>

  <div class="e-avatar e-avatar-large e-avatar-circle">

 

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />

 

  </div>

 

  <div class="e-avatar e-avatar-circle">

 

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />

 

  </div>

 

  <div class="e-avatar e-avatar-small e-avatar-circle">

 

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />

 

  </div>

 

  <div class="e-avatar e-avatar-xsmall e-avatar-circle">

 

    <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" />

 

  </div>

Conclusion:

We hope you enjoyed learning how to get started easily with Syncfusion Angular 11 Avatar

You can refer to our documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Avatar example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!