ngx-gravatar

The gravatar directive for Angular applications.

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).

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:

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

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

Testing

To lint

ng lint

To run all tests

ng test

License

MIT © t-ho