Dynamically Generate and Integrate GitHub-Like User Avatars

npm install -g @angular/cli

ng new my-app

npm install spark-md5 --save

<span>Email: </span><input type="email" (focusout)="onFocusOut($event)" /> 
<span>Email Hash: </span><span>{{hash}}</span>

        Here, the {{hash}} expression displays the generated hash value.

• Import SparkMD5 in the app.component.ts file.

import * as SparkMD5 from 'spark-md5';

• Generate a hash value using SparkMD5 in the onFocusout event of the email input.

export class AppComponent implements AfterViewInit {
  public hash: string;
  constructor() {    
  }
  //Email input focusout event handler
  onFocusOut(event: any) {
    if (event.target.value) { // Get the textbox value
      this.hash = SparkMD5.hash(event.target.value); // Generate hash value
    }
  }
}

Generate Identicon using email hash

With the email hash value generated, we now need to create the Identicon by requesting Gravatar along with the email hash. You can use the following code sample to create an Identicon.

createIdenticon(emailHash: string) {
    this.avatar = 'https://www.gravatar.com/avatar/' + emailHash + '?d=identicon';
  }

To learn more about avatar generation, refer to the Gravatar documentation.

If the email address is already registered with Gravatar.com, then the profile picture for that email address will be returned.

Now, pass the generated email hash value to the above createIdenticon() function to generate the Identicon dynamically.

  // Email input focusout event handler
  onFocusOut(event: any) {
    if (event.target.value) { // Get the text box value
      this.hash = SparkMD5.hash(event.target.value); // Generate hash value
      this.createIdenticon(this.hash); // Create Identicons
    }
  }

Integrate avatar component

To integrate the Essential JS 2 avatar component, you need to install the @syncfusion/ej2-layouts npm package. You can run the following command to install it.

npm install @syncfusion/ej2-layouts --save

The avatar component is a pure CSS component that doesn’t have any dependencies for rendering. Include the avatar component’s theme alone in the application to use the component.

[src/styles.css]

@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';

Place the generated Identicon in an image tag and wrap that inside the avatar component as shown in the following code example.

[src/app/app.component.html]

<span class="e-avatar e-avatar-xlarge"><img [src]="avatar" /></span>
<span class="e-avatar e-avatar-large"><img [src]="avatar" /></span>
<span class="e-avatar"><img [src]="avatar" /></span>
<span class="e-avatar e-avatar-small"><img [src]="avatar" /></span>
<span class="e-avatar e-avatar-xsmall"><img [src]="avatar" /></span>

Here, the image tag src attribute holds the value of the generated Identicon from the previous section.

Serve the application

Go to the application directory and launch the server using the following command.

ng serve --open

Once all the files are compiled successfully, it will serve the site.

The avatar should look something like the following figure.

Avatars generated from email hash

Edit the entry in the text box to generate a dynamic avatar for the email ID.

In this application, we don’t validate the email input. If we need to, we can include client-side email validation as discussed in this Angular documentation.

Now we have successfully generated Identicons from Gravatar.com based on the user’s email and integrated them into our avatar component.

In most applications, the profile picture also displays notification information. You can use our Essential JS 2 badge component to display such notifications.

Integrate badge component

To integrate the badge component, first, you need to install the @syncfusion/ej2-notifications package. Run the following command to install the package.

npm install @syncfusion/ej2-notifications --save

Similar to the avatar component, the badge is also a pure CSS component that requires only the badge theme in the application to use the component.

[src/style.css]

@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';

You can integrate the badge by wrapping the avatar and the badge as in the following code example.

<div class="avatar-container">
    <span class="e-avatar e-avatar-xlarge"><img [src]="avatar" /></span>
    <span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap">5</span>
</div>

Next, the Angular CLI recompiles the application and reloads the browser window.

The avatar and badge should look something like this.

Avatars with notification badges

Here we integrated a secondary notification badge to display the notification count. The following badge types are available in the component:

• Primary
• Secondary
• Success
• Danger
• Warning
• Info
• Light
• Dark

• Angular 2 Succinctly
• JavaScript Succinctly
  
• TypeScript Succinctly
• WPF Succinctly
• UWP Succinctly

Tags: