Getting started with Angular Avatar component

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

Dependencies

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

|-- @syncfusion/ej2-layouts

Installation and configuration

To setup basic Angular sample use the following commands.

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

For more information, refer to Angular sample setup.

Install Syncfusion notifications package using below command.

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.

[src/styles.css]

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

[src/app/app.component.ts]

import { Component } from '@angular/core';

@Component({
    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.

npm start

The following example shows a basic avatar component.

Source

Preview

app.component.ts

app.module.ts

main.ts

index.css

import { Component } from '@angular/core';

@Component({
    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 { }

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

#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;
}

Getting started with Angular Avatar component

Dependencies

Installation and configuration

Add avatar into application

Run the application

See Also