ng-multiavatar

This is a simple angular wrapper for multiavatar-js library by multiavatar.com.

Demo

https://multiavatar.com/

Installation

npm install ng-multiavatar 

Quickstart

// app.module.ts
import { NgModule } from '@angular/core';
import { NgMultiavatarModule } from 'ng-multiavatar';

@NgModule({
  imports: [NgMultiavatarModule],
})
export class AppModule {}

// your.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  template: ` <ng-multiavatar seed="Jon Snow"></ng-multiavatar> `,
})
export class YourComponent {}

// That's it!
// You can, of course, customize it. Check out the API Reference below.

API Reference

seed

Type	Required	Default
string	✓	Binx Bond

Use this property to set the seed for the avatar generation.

Example

<ng-multiavatar
  seed="seed123abc%&_+"
></ng-multiavatar>

hasBackground

Type	Required	Default
boolean	✕	true

If this is false, the final avatar will be without the circle background.

Example

<ng-multiavatar
  seed="Steve Jobs"
  [hasBackground]="false"
></ng-multiavatar>

config

IMPORTANT!! This property overrides any seed value!

Type	Required	Default
object	✕	undefined

Pass an object to force a specific initial version. The config is an object of type AvatarConfig. This object has the properties: part and theme.

key	possible values
part	'01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15'
theme	'A', 'B', 'C'

Example

<ng-multiavatar
  [config]="{'part':'01', 'theme':'C'}"
></ng-multiavatar>

License

LICENSE

Screenshots

GitHub @ykoitzsch  ·  Twitter @isleepcode