Angular Generate Random Password Example

Hello Developer,

This tutorial will provide an example of angular generate random password. let’s discuss about how to generate password in angular. you can see angular random password generator. This tutorial will give you a simple example of angular password generator.

You can use this example in angular 8, angular 9, angular 10, angular 11, angular 12, angular 13 and angular 14 versions.

If you need to generate a random password for the user then I will give you two examples to create a random password in the angular app. so let’s see simple examples one by one example:

Preview:

Angular Generate Random Password Example

Example 1:

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

password = '';

/*------------------------------------------

--------------------------------------------

generatePassword

--------------------------------------------

--------------------------------------------*/

public generatePassword() {

this.password = Math.random().toString(36).slice(-8);

}

}

src/app/app.component.html

<div class="container">

<h1>Angular Generate Random Password Example - ItSolutionStuff.com</h1>

<div class="justify-center">

<p><strong>Password:</strong> {{ password }}</p>

<button class="btn btn-success" type="submit" (click)="generatePassword()">Click me!</button>

</div>

</div>

Example 2:

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

password = '';

/*------------------------------------------

--------------------------------------------

generatePassword

--------------------------------------------

--------------------------------------------*/

public generatePassword() {

this.password = Array(10).fill("0[email protected]-#$").map(function(x) { return x[Math.floor(Math.random() * x.length)] }).join('');

;

}

}

src/app/app.component.html

<div class="container">

<h1>Angular Generate Random Password Example - ItSolutionStuff.com</h1>

<div class="justify-center">

<p><strong>Password:</strong> {{ password }}</p>

<button class="btn btn-success" type="submit" (click)="generatePassword()">Click me!</button>

</div>

</div>

I hope it can help you…

Leave a Comment