Types in Angular Avatar component

4 Mar 20268 minutes to read

The Avatar component provides different sizes and visual styles to suit various design requirements. This section explains 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/material3.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material3.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 shape styles to match different design preferences:

• Default (Rectangular with rounded corners)
• Circle

Default

The default avatar shape is rectangular 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/material3.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material3.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, commonly used 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/material3.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material3.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));