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, angular 14, angular 15, angular 16 and angular 17 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:

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("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$").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...