Press "Enter" to skip to content

Simple and Lightweight Avatar Component for Angular 2+ | ng2-avatar

Ng2-avatar is a simple, lightweight, and configurable avatar component for Angular 2+ applications. Inspired by Google Apps.

ngx avatar example, angular avatar component, ngx avatar npm, avatar in angular material, ngx avatar is not a known element

How to make use of it:


npm install --save ng2-avatar

1. Once installed, you will need to import the main module:

import { AvatarModule } from 'ng2-avatar';

2. The only part left is to list the imported module in your application module.

import { AvatarModule } from 'ng2-avatar';

  declarations: [
  imports: [
  bootstrap: [AppComponent]
export class AppModule {

3. Other modules in your app can import AvatarModule:

import { AvatarModule } from 'ng2-avatar';

  declarations: [OtherComponent, ...],
  imports: [AvatarModule, ...], 
export class OtherModule {
<avatar [email]="email" [displayType]="'circle'"></avatar>
 <input type="email" [(ngModel)]="email">


configuration optiontypedefaultdescription
emailStringnoneThis email is for generating the initials letters or getting the picture from Gravatar API (required)
namestringnoneThis name is for generating the initials letters (required)
sizenumber100Is the size of the image and avatar
backgroundstringRandom colorThe background colors for the letter’s avatar
displayTypestringcirclenone, circle, rounded
letterstring?These are the default letter
defaultProtocolstringnullspecifies a protocol or uses protocol-agnostic gravatar URL when empty

Letter Avatar Component For Angular, ng2-avatar Plugin/Github

See Demo And Download

Official Website(snics): Click Here

This superior jQuery/javascript plugin is developed by snics. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.