How to get started easily with Syncfusion Angular 8 Avatar components?
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 8 project with minimal code.
Prerequisites
Before starting, the following tools and SDK need to be installed in your machine:
- Node.js (v8.10.0 or above)
- Angular 8
- Angular CLI
Installation and application creation
You can install Angular CLI 8 using the following command.
npm install -g @angular/cli@8.1.1 |
Note:
If you need to follow and run the application in Angular 7 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 8 application
ng new avatar-angular8 cd avatar-angular8 |
Installing EJ2 Avatar
npm install @syncfusion/ej2-angular-layouts |
Serve the application
ng serve --open |
Your application will open in browser in the http://localhost:4200. Refer to the following screenshot for Angular 8 version.
Adding Angular 8 Avatar
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.
- Import the CSS styles of the Avatar component.
[style.css]
@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css'; |
- 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> |
- 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!
