We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 Avatar?

Platform: Angular - EJ 2 |
Control: 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:

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

 

  1. Create an Angular 11 application using Angular cli.

 

ng new angular11-app

cd angular11-app

 

  1. 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.

Angular-app

 

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.

  1. 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';

 

  1. 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>

 

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

 

ng serve --open

 

Avatar

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>

 

Avatar-sizes

 

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>

 

avatar-shapes

 

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!

2X faster development

The ultimate Angular UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile