github.com/haithemmosbahi/ngx-avatar

<ngx-avatar>

A universal avatar component for Angular 2+ applications that fetches / generates avatar based on the informations you have about the user. The component has a fallback system that if for example an invalid Facebook ID is used it will try google ID and so on.

You can use this component whether you have a single source or a multiple avatar sources. In this case the fallback system will fetch the first valid avatar.

Moreover, the component can shows name initials or simple value as avatar.

Supported avatar sources:

• Facebook
• Google
• Twitter
• Skype
• Gravatar
• Custom image
• name initials
• value

The fallback system uses the same order as the above source list, Facebook has the highest priority, if it fails, google source will be used, and so on.

Installation

Install avatar component using NPM::

$ npm install ngx-avatar --save

Or download as ZIP.

Usage

1. Import AvatarModule :

Once you have installed ngx-avatar, you can import it in your AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your AvatarModule
import { AvatarModule } from 'ngx-avatar';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify AvatarModule as an import
    AvatarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. Start using it:

Once the AvatarModule is imported, you can start using the component in your Angular application:

<ngx-avatar></ngx-avatar>

Examples

<ngx-avatar facebookId="1508319875"></ngx-avatar>
<ngx-avatar googleId="1508319875"></ngx-avatar>
<ngx-avatar twitterId="1508319875"></ngx-avatar>
<ngx-avatar skypeId="1508319875"></ngx-avatar>
<ngx-avatar gravatarId="adde9b2b981a8083cf084c63ad86f753"></ngx-avatar>
<ngx-avatar gravatarId="[e-mail]"></ngx-avatar>
<ngx-avatar src="assets/avatar.jpg"></ngx-avatar>
<ngx-avatar name="John Doe"></ngx-avatar>
<ngx-avatar value="75%"></ngx-avatar>

<ngx-avatar facebookId="userFacebookID" skypeId="userSkypeID"
 googleId="google" name="Haithem Mosbahi" src="assets/avatar.jpg"
 value="28%"  twitterId="twitter"
 gravatarId="adde9b2b981a8083cf084c63ad86f753" 
 size="100" [round]="true">
</ngx-avatar>

Check out this file for more examples on how to use ngx-avatar in your application.

Demo

The demo folder contains an application generated with angular cli that uses ngx-avatar component.

To run the demo application :

$ npm install
$ ng serve

Options

Attribute	Type	Default	Description
facebookId	string		Facebook ID
googleId	string		Google ID
twitterId	string		Twitter Handle
skypeId	string		Skype ID
gravatarId	string		email or md5 email related to gravatar
src	string		Fallback image to use
name	string		Will be used to generate avatar based on the initials of the person
value	string		Show a value as avatar
bgColor	string	random	Give the background a fixed color with a hex like for example #FF0000
fgColor	string	#FFF	Give the text a fixed color with a hex like for example #FF0000
size	number	50	Size of the avatar
textSizeRatio	number	3	For text based avatars the size of the text as a fragment of size (size / textSizeRatio)
round	boolean	true	Round the avatar corners
style	object		Style that will be applied on the root element
clickOnAvatar	callback		Fired when the avatar is clicked. The component emits the source object that has been used to fetch the avatar.

The source object has the following properties:

• sourceType : avatar source ( Facebook, twitter, etc)
• sourceId : identifier of the user
• getAvatar(size?) : method to fetch user avatar from the current source

Release Notes

• 1.1 : Listen to click events on avatar and support retina display.
• 1.0 : Avatar component that fetches / generates user avatar from different sources.

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Haithem Mosbahi