{

How to generate GUID in Angular 13| Typescript UUID example


Learn how to generate Unique ID - GUID, UUID in Angular with examples.

Please see my previous posts on GUID with examples.

Generate Angular UUID in Angular application

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

Angular is an MVC framework based on Typescript.GUID and UUID generate 128 bits of the implementation.

This blog post works on all angular versions including the latest versions.

  • Angular 2
  • Angular 7
  • Angular 9
  • Angular 10
  • Angular 11
  • Angular 12
  • Angular 13 This article is updated and compatible to work with the latest Angular 13 versions.

There are many ways we can generate GUID in the Angular application.

Following are different npm packages available for GUID.

This example also works ionic 5 application.

The example talks about the following things.

  • How to generate GUID in typescript.
  • How to generate UUID in angular component

Generate UUID using angular2-uuid npm package

First, install the angular2-uuid npm package using the npm install command.

npm install angular2-uuid --save

It installs and creates an angular2-uuid dependency in node_modules and added one entry in the dependency of package.json.

{
  "devDependencies":{
    "angular2-uuid":"1.1.1";
  }
}

Next, Import UUID module in angular component

Once angular2-uuid is installed to angular application successfully, The next step has to import UUID into the 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

Here is a sequence of steps for

  • Created button in HTML component
  • on clicking the button, it calls a function in the angular component.
  • UUID.UUID() generates unique identifier app.component.html You can see my previous about Angular button click event example
<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

Generate uuid in typescript example

In typescript, It is very easy to generate uuid.

  • import uuid into the class
  • generate unique UUID using uuid.v4()

Following is a Typescript UUID Class for generating a UUID code

import * as uuid from "uuid";

class UUID {
        constructor (public uuid: string) {
            this._uuid = uuid;
        }

        private _uuid: string;

        public toString(): string {
            return this.guid;
        }

        // Static 
        static generateNew(): uuid {
  
            return uuid.v4();
        }
    }

And also you can pass UUID in methods with parameters in typescript

public toString(uuidvalue: uuid): string {
  console.log(uuidvalue);
}

Conclusion

In this tutorial, Learned how to generate UUID and GUID in the Angular app.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.