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

angular2-uuid npm package

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

npm install angular2-uuid --save

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


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.

import { Component } from '@angular/core';
import { UUID } from 'angular2-uuid';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  constructor() {


    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">
       Angular Typescript UUID generation
    <button  (click)="generateUUID()" >
    Generate UUID</button>

Output is Angular typescript UUID example

Typescript uuid 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 {


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

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
You'll get a notification every time a post gets published here.

Related posts

Angular 13 Lowercase pipe tutorial | How to Convert a string to small case example

Angular 13 Titlecase pipe tutorial | How to Capitalize the first letter of each word of a string example

Angular 13 UpperCase pipe tutorial | How to Convert a String to Uppercase example

What not to commit in Angular| Ignore files in git example

Best 5 ways to remove the duplicate object from array In javascript| Fastest way delete duplicates in typescript

Best Five ways to iterate enum in typescript with examples?

Best Ways to convert timestamp to Date format in typescript| Angular timestamp date example