This is a simple angular wrapper for multiavatar-js library by multiavatar.com.
npm install ng-multiavatar // 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.| Type | Required | Default |
|---|---|---|
| string | ✓ | Binx Bond |
Use this property to set the seed for the avatar generation.
<ng-multiavatar
seed="seed123abc%&_+"
></ng-multiavatar>| Type | Required | Default |
|---|---|---|
| boolean | ✕ | true |
If this is false, the final avatar will be without the circle background.
<ng-multiavatar
seed="Steve Jobs"
[hasBackground]="false"
></ng-multiavatar>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' |
<ng-multiavatar
[config]="{'part':'01', 'theme':'C'}"
></ng-multiavatar>
GitHub @ykoitzsch · Twitter @isleepcode