Angular Generate Random Password Example

Hello dev, Today we are going to learn Angular Generate Random Password Example. This tutorial cover on how to generate a random password for angular application with examples.

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 examples:

Also Read: Codeigniter 3 and AngularJS CRUD with Search and Pagination Tutorial

Angular Generate Random Password Examples:

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 - LaravelTuts.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>

Also Read: Laravel 9 Custom Login and Registration Example

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 - LaravelTuts.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>

Preview:

Conclusion:

Today, We had learn Angular Generate Random Password Examples. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.

Also Read: How to Create & Use Component in Angular 13 App