Ngx-stored-gravatar NPM

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]="'test@gmail.com'" 
[name]="'John Doe'" 
[useLocalStore]="true" 
[size]="300" 
[style]="styleSettings">
</ngx-stored-gravatar> 

<ngx-stored-gravatar [email]="'test@gmail.com'"></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.

usage

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.