Angular UUID - Generate Unique Identifier with examples Angular4|5|6

In this blog post, We are going to learn how to generate Unique ID - GUID, UUID in Angular with examples.
Please see my previous posts on GUID with examples

• javascript UUID example
• Vuejs GUID Example

Angular Typescript UUID

Unique Identifier generation is requirement in any programming language. It contains 128 bits in size separated by hypen with 5 groups.

Angular is mvc framework based on Typescript.GUID and UUID generates 128 bits of samthe e implementation.

This blog post works on all angular versions

• Angular 2
• Angular 4
• Angular 5
• Angular 6

There are a number of ways we can generate GUID

We have already npm packages available 

• angular2-uuid
• angular-uuid
• uuid

Example Usage

The example talks about following things

• Generate GUID in typescript
• Generator UUID in angular component

angular2-uuid npm package

First install angular2-uuid npm package using npm install command

npm install angular2-uuid --save

This installs and create a angular2-uuid dependency in node_modules and added one entry in dependency of package.json
Import UUID module in angular component

app.component.ts
import { Component } from '@angular/core';
import { UUID } from 'angular2-uuid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  uuidValue:string;
  constructor() { 

   }

  generateUUID(){
    this.uuidValue=UUID.UUID();
    return this.uuidValue;
  }
}

HTML Template generation
Created button, onclicking the button, it calls function in angular component. UUID.UUID() generates unique identifier app.component.html

<div style="text-align:center">
    <h1>
       Angular Typescript UUID generation
    </h1>
    <button  (click)="generateUUID()" >
    Generate UUID</button>
    <h2>{{uuidValue}}</h2>
 </div>

Output is