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
Import UUID module in angular component
Created button, onclicking the button, it calls function in angular component. UUID.UUID() generates unique identifier app.component.html
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.jsonImport 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 generationCreated 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
EmoticonEmoticon