Introduction

In most applications, there is a field while registering to enter a valid password that should contain at least a digit a number and one special symbol. In this article, we are going to learn how to create a password strength bar which will show whether the entered password is weak, good, or strong.
Prerequisites
  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed
Step 1
Lets create a new Angular project using the following NPM command:
  1. ng new passwordStrengthBar
Step 2
Now, let's create a new component by using the following command:
  1. ng g c password-strength-bar
Step 3
Now, open the password-strength-bar.component.html file and add the following code in the file:
  1. <div style="margin: 11px;" id="strength" #strength>
  2. <small>{{barLabel}}</small>
  3. <ul id="strengthBar">
  4. <li class="point" [style.background-color]="bar0"></li><li class="point" [style.background-color]="bar1"></li><li class="point" [style.background-color]="bar2"></li><li class="point" [style.background-color]="bar3"></li><li class="point" [style.background-color]="bar4"></li>
  5. </ul>
  6. </div>
Step 4
Now, open the password-strength-bar.component.ts file and add the following code in this file:
  1. import {Component, OnChanges, Input, SimpleChange} from '@angular/core';
  3. @Component({
  4. selector: 'app-passoword-strength-bar',
  5. templateUrl: './passoword-strength-bar.component.html',
  6. styleUrls: ['./passoword-strength-bar.component.css']
  7. })
  8. export class PassowordStrengthBarComponent implements OnChanges {
  10. @Input() passwordToCheck: string;
  11. @Input() barLabel: string;
  12. bar0: string;
  13. bar1: string;
  14. bar2: string;
  15. bar3: string;
  16. bar4: string;
  18. private colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
  20. private static measureStrength(pass: string) {
  21. let score = 0;
  22. // award every unique letter until 5 repetitions
  23. let letters = {};
  24. for (let i = 0; i< pass.length; i++) {
  25. letters[pass[i]] = (letters[pass[i]] || 0) + 1;
  26. score += 5.0 / letters[pass[i]];
  27. }
  28. // bonus points for mixing it up
  29. let variations = {
  30. digits: /\d/.test(pass),
  31. lower: /[a-z]/.test(pass),
  32. upper: /[A-Z]/.test(pass),
  33. nonWords: /\W/.test(pass),
  34. };
  36. let variationCount = 0;
  37. for (let check in variations) {
  38. variationCount += (variations[check]) ? 1 : 0;
  39. }
  40. score += (variationCount - 1) * 10;
  41. return Math.trunc(score);
  42. }
  44. private getColor(score: number) {
  45. let idx = 0;
  46. if (score > 90) {
  47. idx = 4;
  48. } else if (score > 70) {
  49. idx = 3;
  50. } else if (score >= 40) {
  51. idx = 2;
  52. } else if (score >= 20) {
  53. idx = 1;
  54. }
  55. return {
  56. idx: idx + 1,
  57. col: this.colors[idx]
  58. };
  59. }
  61. ngOnChanges(changes: {[propName: string]: SimpleChange}): void {
  62. var password = changes['passwordToCheck'].currentValue;
  63. this.setBarColors(5, '#DDD');
  64. if (password) {
  65. let c = this.getColor(PassowordStrengthBarComponent.measureStrength(password));
  66. this.setBarColors(c.idx, c.col);
  67. }
  68. }
  69. private setBarColors(count, col) {
  70. for (let _n = 0; _n < count; _n++) {
  71. this['bar' + _n] = col;
  72. }
  73. }
  75. }
Step 5
Now, open the password-strength-bar.component.css file and add the following code:
  1. ul#strengthBar {
  2. display:inline;
  3. list-style:none;
  4. margin:0;
  5. margin-left:15px;
  6. padding:0;
  7. vertical-align:2px;
  8. }
  9. .point:last {
  10. margin:0 !important;
  11. }
  12. .point {
  13. background:#DDD;
  14. border-radius:2px;
  15. display:inline-block;
  16. height:5px;
  17. margin-right:1px;
  18. width:20px;
  19. }
Step 6
Now, open the app.component.html file and add the following code in this file:
  1. <h3>Password Strength Bar</h3>
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-md-8 col-md-offset-2">
  6. <div class="panel panel-default">
  7. <div class="panel-body">
  8. <form class="form-horizontal" method="" action="">
  10. <div class="form-group">
  11. <label class="col-md-4 control-label">Email</label>
  12. <div class="col-md-6">
  13. <input type="email" class="form-control" name="email" value="">
  14. </div>
  15. </div>
  16. <div class="form-group">
  17. <label class="col-md-4 control-label">Password</label>
  18. <div class="col-md-6">
  19. <input type="password" class="form-control"
  20. id="password" name="password" placeholder="Enter password"
  21. [(ngModel)]="account.password" #password="ngModel" minlength="5" maxlength="50"
  22. required>
  24. <app-passoword-strength-bar [passwordToCheck]="account.password" [barLabel]="barLabel">
  25. </app-passoword-strength-bar>
  26. </div>
  27. </div>
  28. </form>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
Step 7
Now, open the app.component.ts file and add the following code:
  1. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4. selector: 'app-root',
  5. templateUrl: './app.component.html',
  6. styleUrls: ['./app.component.css']
  7. })
  8. export class AppComponent implements OnInit {
  9. public account = {
  10. password: null
  11. };
  12. public barLabel: string = "Password strength:";
  14. constructor() { }
  16. ngOnInit() {
  18. }
  19. }
Step 8
Now, open the app.module.ts file and add the following code:
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms';
  4. import { AppComponent } from './app.component';
  5. import { PassowordStrengthBarComponent } from './passoword-strength-bar/passoword-strength-bar.component';
  7. @NgModule({
  8. declarations: [
  9. AppComponent,
  10. PassowordStrengthBarComponent
  11. ],
  12. imports: [
  13. BrowserModule,
  14. FormsModule,
  15. ],
  16. providers: [],
  17. bootstrap: [AppComponent]
  18. })
  19. export class AppModule { }
Step 9
Now let's run the project by using 'npm start' or 'ng serve' command and check the output.
How To Check Password Strength Meter In Angular 8
How To Check Password Strength Meter In Angular 8
How To Check Password Strength Meter In Angular 8
How To Check Password Strength Meter In Angular 8

Summary

In this article, we 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 can improve upon it.