NGX-GRAVATAR

Angular Gravatar Directive

Source Code Demo

npm version GitHub stars CI Testing codecov npm npm bundle size (minified + gzip) code style: prettier license

ngx-gravatar

The gravatar directive for angular 5+.

This directive supports two avatar sources:

  • Custom image
  • Gravatar

By default, the custom image has a higher priority. If it is invalid, the Gravatar will be used. The priority can be changed by setting preferGravatar input or override the default configuration (see below).

Angular Gravatar Directive

Visit here for more information about Gravatar.

Demo

Live demo here.

Play with ngx-gravatar here on stackblitz.

If you like ngx-gravatar, please give it a :star: on github

Installation

Install ngx-gravatar via NPM, using the command below.

npm install --save ngx-gravatar
# or
yarn add ngx-gravatar

For other Angular version:

Angular Installation command
Angular 9 npm i --save ngx-gravatar
Angular 8 npm i --save ngx-gravatar@8.1.0
Angular 6 & 7 npm i --save ngx-gravatar@7.2.2
Angular 4 & 5 npm i --save ngx-gravatar@3.0.5

Getting started

Import the GravatarModule in your root application module AppModule or any other module you need to use gravatar directive:

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

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

import { GravatarModule } from 'ngx-gravatar';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Import GravatarModule
    GravatarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Use in component

After importing the GravatarModule, you can use the ngxGravatar directive in img tags as below:

<img ngxGravatar [email]="'example@mail.com'" />
<img ngxGravatar [md5Hash]="'fbf2b9cfc0a472389f3620e471bdf0e9'" />
<img ngxGravatar [email]="'example@mail.com'" size="30" />
<img
  ngxGravatar
  [email]="'example@mail.com'"
  size="30"
  src="assets/avatar.jpg"
/>
<img
  ngxGravatar
  [email]="'example@mail.com'"
  size="30"
  src="assets/avatar.jpg"
  [style]="styleObject"
/>

Input Parameters

Attribute Type Required Default Description
email string requried (empty string) Email associated with Gravatar, either this attribute or md5Hash must be set
md5Hash string requried (empty string) MD5 hash of email associated with Gravatar, either this attribute or email must be set
src string optional   Custom image to use
preferGravatar boolean optional false If true, Gravatar will have higher priority. Otherwise, src image will be loaded first.
size number optional 40 Displayed size of the avatar
ratio number optional 2 The ratio of requested image size to displayed size
round boolean optional true Circle avatar
cornerRadius number optional 0 Round the corner of square avatar. Only applied when round is set to false
borderColor string optional   Specify the color of the border
borderWidth number optional   Specify the width of the border
style object optional   Style object that will be applied on the <img> tag. NOTE: It will override others attributes.
backgroundColor string optional transparent Specify the background color
rating string optional g The rating string of Gravatar. Possible values: g, pg, r, x. rating type is case-sensitive.
fallback string optional retro The fallback string of Gravatar. Possible values: blank, indenticon, mp (or mm), monsterid, retro, robohash, wavatar. fallback is case sensitive.

Override Default Configuration

Default configuration options can be set globally by using the .forRoot() method. Note that the input parameters that are passed into an ngx-gravatar element will override any custom global config options that have been set. Please see below for an example of how to override default configurations.

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

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

import { GravatarModule, GravatarConfig, FALLBACK, RATING } from 'ngx-gravatar';

const gravatarConfig: GravatarConfig = {
  fallback: FALLBACK.robohash,
  rating: RATING.x,
  backgroundColor: 'rgba(0, 0, 0, 0.1)',
  borderColor: 'rgba(0, 0, 0, 0.1)',
  hasBorder: true // Set this flag to true to have a border by default
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Import GravatarModule with custom configuration globally
    GravatarModule.forRoot(gravatarConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Options

Option Type Required Default Description  
hasBorder boolean optional false Specify whether to have border or not  
preferGravatar boolean optional false If true, Gravatar will have higher priority. Otherwise, src image will be loaded first.  
size number optional 40 Displayed size of the avatar  
ratio number optional 2 The ratio of requested image size to displayed size  
round boolean optional true Circle avatar  
cornerRadius number optional 0 Round the corner of square avatar. Only applied when round is set to false  
borderRadius string optional 50% Only applied when round is set to true.  
borderColor string optional #000000 Specify the color of the border  
borderWidth number optional 1 Specify the width of the border  
borderStyle string optional solid Specify the style of the border  
backgroundColor string optional transparent Specify the background color  
rating string optional g The rating string of Gravatar. Possible values: g, pg, r, x. Note: rating type is case sensitive.  
fallback string optional retro The fallback string of Gravatar. Possible values: blank, indenticon, mp (or mm), monsterid, retro, robohash, wavatar. Note: fallback is case sensitive.  

Testing

To lint

ng lint

To run all tests

ng test

License

MIT © t-ho