Types in Angular Avatar component

27 Aug 20257 minutes to read

The Angular Avatar component provides different sizes and visual styles to suit various design requirements. This section covers the available avatar sizes and shape types that can be customized using CSS classes.

Avatar size

The Essential^® JS 2 Avatar provides predefined sizes that can be applied using CSS classes with the base .e-avatar class to control the avatar’s dimensions.

Class Name	Description
e-avatar-xlarge	Displays extra large size avatar.
e-avatar-large	Displays large size avatar.
e-avatar	Displays default size avatar.
e-avatar-small	Displays small size avatar.
e-avatar-xsmall	Displays extra small size avatar.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';

@Component({
imports: [
    ],
standalone: true,
    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>
    </div>
    `
})

export class AppComponent { }

styles.css

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

#container {
    visibility: hidden;
}

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

#element {
    display: block;
    width: 300px;
    margin: 100px auto;
    border-radius: 3px;
}

.e-avatar {
  background-image: url('https://ej2.syncfusion.com/demos/src/grid/images/2.png');
  margin: 2px;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Avatar types

The Essential^® JS 2 Avatar supports two distinct shape styles to accommodate different design preferences:

• Default (Rectangular with rounded corners)
• Circle

Default

The default avatar style features a rectangular shape with rounded corners, providing a modern appearance suitable for most applications. This style is applied by adding the base class .e-avatar to the target element.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';

@Component({
imports: [
        
    ],
standalone: true,
    selector: 'my-app',
    template: `
    <div id='element'>
            <span class="e-avatar e-avatar-xlarge">RT</span>
            <span class="e-avatar e-avatar-large">RT</span>
            <span class="e-avatar">RT</span>
            <span class="e-avatar e-avatar-small">RT</span>
            <span class="e-avatar e-avatar-xsmall">RT</span>
    </div>
    `
})

export class AppComponent { }

styles.css

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

#container {
    visibility: hidden;
}

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

#element {
    display: block;
    width: 260px;
    margin: 100px auto;
    border-radius: 3px;
}

.e-avatar {
    margin: 2px;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Circle

The circular avatar style creates a perfectly round appearance, ideal for profile pictures and user representations. Apply this style by adding the modifier class .e-avatar-circle along with the base .e-avatar class to the target element.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';

@Component({
imports: [
    ],
standalone: true,
    selector: 'my-app',
    template: `
    <div id='element'>
            <span class="e-avatar e-avatar-xlarge e-avatar-circle">SJ</span>
            <span class="e-avatar e-avatar-large e-avatar-circle">SJ</span>
            <span class="e-avatar e-avatar-circle">SJ</span>
            <span class="e-avatar e-avatar-small e-avatar-circle">SJ</span>
            <span class="e-avatar e-avatar-xsmall e-avatar-circle">SJ</span>
    </div>
    `
})

export class AppComponent { }

styles.css

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

#container {
    visibility: hidden;
}

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

#element {
    display: block;
    width: 300px;
    margin: 100px auto;
    border-radius: 3px;
}

.e-avatar {
    margin: 2px;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));