Thursday, October 11, 2018

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

Related article


EmoticonEmoticon