Introduction

In most applications, there is a field while registering to enter a valid password, which should contain at least a number and one special symbol. In this article, we are going to learn how to create a password strength bar that will detail the strength of a given password.

Prerequisite

  • Basic knowledge of Angular.
  • Visual Studio Code must be installed.
  • Angular CLI must be installed.
  • Node must be installed.

Step 1

Let’s create a new Angular project, using the following npm command.

 

Step 2

Now, let’s create a new component by using the following command.

 

Step 3

Now, open the password-strength-bar.component.html file and add the following code in this file.

 

Step 4

Now, open the password-strength-bar.component.ts file and add the following code in this file. 

 

Step 5

Now, open the password-strength-bar.component.css file and add the following code in this file. 

 

Step 6

Now, open the app.component.html file and add the following code. 

  

Step 7

Now, open the app.component.ts file and add the following code in this file.

 

Step 8

Now, open the app.module.ts file and add the following code in this file.

Step 9

Now, let’s run the project by using  npm start or ng serve command and check the output:

Password strength low

Password strength low

Password strength medium

Password strength medium

Password strength fair

Password strength fair

Password strength good

Password strength good

Password strength great

Password strength great

Summary

In this article, We have learned how we can create a password strength bar in Angular 8 applications.

Please give your valuable feedback/comments/questions about this article. Please let me know if you liked and understood this article, and how I could improve upon it.



Source link

Write A Comment