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

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 

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

Angular typescript UUID example

Similar Posts