NgAvatar

This library is an Angular wrapper around the avatar-initials library by @MatthewCallis.

Usage

Component + Service

AppModule.ts

import { NgModule } from '@angular/core'
import { NgAvatarModule, AvatarService } from 'ng-avatar'
import { AppComponent } from 'app.component'
 
// Optional styles
import 'ng-avatar/avatar.scss'
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NgAvatarModule.forRoot()
    ],
    providers: [
        AvatarService
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {}

AppComponent

import { Component } from '@angular/core'
 
@Component({
    selector: 'my-app',
    template: `
        <img alt="" src="" id="avatar-image">
        <ng-avatar name="John Doe" email="[e-mail]" (onSuccess)="setImage($event)></ng-gravatar>
    `
})
export class AppComponent
{
    setImage(src:string)
    {
        document.getElementById('avatar-image').setAttribute('src', src);
    }
}

Just The Service

import { AvatarService } from 'ng-avatar'
import { Component } from '@angular/core'
 
@Component({
    selector: 'my-app',
    template: `
        <img alt="" src="" id="avatar-image">
        <button type="button" (click)="setImage()">Get Avatar</button>
    `
})
export class AppComponent
{
    constructor(private avatar:AvatarService) {}
    
    setImage()
    {
        let initials:string = this.avatar.Avatar('initials', 'John Doe'),
            gravatar:string = this.avatar.Avatar('gravatar', 'John Doe', '[e-mail]');
        
        document.getElementById('avatar-image').setAttribute('src', initials);
    }
}

Run in Development

$ npm start

Build for NPM

$ npm run build