The NgxPasswordStrengthMeter is password strength meter for Angular used to calculate and display the strength and/or feedback of a provided password.

To display the strength of the password with a visual feedback.

• zxcvbn: To estimate the strength of the password and also provide a feedback with suggestions and warning messages.

Step 1: Install ngx-password-strength-meter

npm install ngx-password-strength-meter --save
# or
yarn add ngx-password-strength-meter --save

Step 2: Import the library

import { NgxPasswordStrengthMeter } from 'ngx-password-strength-meter';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxPasswordStrengthMeter, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Step 3: Add the ngx-password-strength-meter element to your template

<ngx-password-strength-meter [password]="password"></ngx-password-strength-meter>

You can change the colors of meter by overriding the CSS variables bellow

variable	default
--strength-meter-background	#dddddd
--strength-meter-score-0	#8b0000
--strength-meter-score-1	#ff4500
--strength-meter-score-2	#ffa500
--strength-meter-score-3	#9acd32
--strength-meter-score-4	#008000

.strength-meter {
  --strength-meter-score-0: #668811 !important;
  --strength-meter-background: rgb(0, 38, 250) !important;
}

• <ngx-password-strength-meter>

Used to calculate and display the strength of a provided password

• NgxPasswordStrengthMeterService

Service provided that can be used to get strength of a password

export class AppComponent implements OnInit {
  constructor(private passwordStrengthMeterService: NgxPasswordStrengthMeterService) {}

  ngOnInit() {
    const result = this.passwordStrengthMeterService.calculate('123');
  }
}