na

ng-avatar

An Angular component/service for generating an avatar with initials or from gravatar.com

Showing:

Popularity

Downloads/wk

3

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

12

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Angular Avatar

Readme

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="john@johndoe.com" (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', 'john@johndoe.com');
        
        document.getElementById('avatar-image').setAttribute('src', initials);
    }
}

Run in Development

$ npm start

Build for NPM

$ npm run build

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial