ngx-stored-gravatar

A component that stores the gravatar image in the local storage of the browser. This comes in handy particularly in the cases where avatars may show up repeatedly, for instance, in a chat component.

Installation

Install ngx-stored-gravatar via NPM, using the command below:

NPM

npm install --save ngx-stored-gravatar 

Getting started

Import the NgxStoredGravatarModule in your root application module AppModule or any other module you need to use the component:

 import { BrowserModule } from  '@angular/platform-browser'; 
 import { NgModule } from  '@angular/core';    
 import {CommonModule} from '@angular/common';
 import { AppComponent } from './app.component';    
 import {NgxStoredGravatarModule} from 'ngx-stored-gravatar';    
 @NgModule({    
  declarations: [    
         AppComponent
          ],  
  imports: [    
         BrowserModule,
         CommonModule, 
         // Import NgxStoredGravatarModule 
         NgxStoredGravatarModule 
         ],  
  providers: [],    
  bootstrap: [AppComponent] 
}) 
export class AppModule { }    

Using it in a component

After importing the NgxStoredGravatarModule, you can use the ngxStoredGravatar component as below:

<ngx-stored-gravatar    
[email]="'[e-mail]'" 
[name]="'John Doe'" 
[useLocalStore]="true" 
[size]="300" 
[style]="styleSettings">
</ngx-stored-gravatar> 
 
<ngx-stored-gravatar [email]="'[e-mail]'"></ngx-stored-gravatar> 

The style input parameter should be used to set the css properties like width and height.

Demo

Click here to see a few variety of the component. The style input can be used to completely modify the style of the image/text.

Input Parameters

Attribute	Type	Required	Default	Description
email	string	required	(empty string)	Email associated with the Gravatar.
name	string	optional	(empty string)	If the Gravatar is not found, the first name & the last name supplied via name will be used as a fallback.
useLocalStore	boolean	optional	true	If false, Gravatar image will nt be stored in the browser's local storage.
size	number	optional	200	Size of the Gravatar image that is retrieved. This does not necessarily mean the size displayed in the UI.
style	object	optional	{ 'width': '60px', 'height': '60px', 'display': 'flex', 'align-items': 'center', 'justify-content': 'center', 'border-radius': '50%', 'border': '1px solid rgba(0,0,0,.10)', 'background': '#fafafa', 'color': '#aaaaaa', 'text-transform': 'uppercase', 'font-weight': 'normal', 'font-size': '13px', 'line-height': 'normal' }	An object suitable for the ngStyle directive that is applied on the image.

License

This project is licensed under the MIT License.