Search results

Getting started with Angular Avatar component

24 Jun 2022 / 2 minutes to read

The following section explains the steps required to create a simple avatar component using styles and its basic usage.


The Avatar component is pure CSS component which doesn’t need specific dependencies to render.

Copied to clipboard
|-- @syncfusion/ej2-layouts

Installation and configuration

  • To setup basic Angular sample use the following commands.
Copied to clipboard
git clone quickstart
cd quickstart
npm install

For more information, refer to Angular sample setup.

  • Install Syncfusion notifications package using below command.
Copied to clipboard
npm install @syncfusion/ej2-layouts --save
  • The Avatar component CSS files are available in the ej2-layouts package folder. This can be referenced in your application using the following code.


Copied to clipboard
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';

We can also use CRG to generate combined component styles.

Add avatar into application

Modify the template in app.component.ts file to render avatar component.


Copied to clipboard
import { Component } from '@angular/core';

selector: 'my-app',
template: `<div id='element'><span class="e-avatar">GR</span></div>`

export class AppComponent {}

Run the application

Run the application in the browser using the following command.

Copied to clipboard
npm start

The following example shows a basic avatar component.

Copied to clipboard
import { Component } from '@angular/core';

    selector: 'my-app',
    template: `
    <div id='element'>
            <span class="e-avatar e-avatar-xlarge"></span>
            <span class="e-avatar e-avatar-large"></span>
            <span class="e-avatar"></span>
            <span class="e-avatar e-avatar-small"></span>
            <span class="e-avatar e-avatar-xsmall"></span>

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

 * Module
    imports: [
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

Copied to clipboard
#container {
    visibility: hidden;

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;

#element {
    display: block;
    width: 300px;
    margin: 130px auto;
    border-radius: 3px;
    justify-content: center;

.e-avatar {
    background-image: url(./pic01.png);
    margin: 2px;

See Also

Types of Avatar