Search results

Getting Started

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
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);

See Also

Types of Avatar