How to get started easily with Syncfusion Angular 11 Avatar?

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. This KB article explains how to easily get started with EJ2 Avatar component in Angular 11 project with minimal code.

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

Create an Angular 11 application

2. Create an Angular 11 application using 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>

Summary

Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!