ng-simple-avatar v2.0.2

Description

Simple yet configurable avatar component with image, initials, dynamic background and fallback system for invalid image URLs.

Demo

You can clone the repo and start the application locally to watch ng-simple-avatar lib in action.

Usage

Install package

npm i ng-simple-avatar

Add import to your module

import { NgSimpleAvatarModule } from 'ng-simple-avatar';

@NgModule({
  imports: [
    ...
    NgSimpleAvatarModule,
  ],
  declarations: [],
  providers: []
})

Then in template:

  <ng-simple-avatar [size]="64" img="https://i.pinimg.com/736x/ef/b4/56/efb4563befb0ae1bed74f004785f3f0f.jpg"></<ng-simple-avatar>
  <ng-simple-avatar name="Bob Marley" email="bob.marley@ebox.com"></<ng-simple-avatar>
  <ng-simple-avatar [size]="100" email="bob.marley@ebox.com" borderColor="brown"></<ng-simple-avatar>

Options

Configuration

You can configure default ng-simple-avatar options:

NgMaterialLoadingModule.forRoot({
  size: '64',
  fallbackImg: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
  fallbackText: 'F',
  ...
})

The configuration interface looks like this:

export interface NgSimpleAvatarConfig {
  size?: number;
  img?: string;
  fallbackImg?: string;
  bgColor?: string;
  borderColor?: string;
  text?: string;
  fallbackText?: string;
}

Contributig to ng-simple-avatar

You are more than welcome to improve this library or create issues on the GitHub issue tracker.