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]="'[email protected]'" 
[name]="'John Doe'" 
[useLocalStore]="true" 
[size]="300" 
[style]="styleSettings">
</ngx-stored-gravatar> 

<ngx-stored-gravatar [email]="'[email protected]'"></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.