Overview

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.

Dependecies

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

Get Started

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>

Changing meter colors

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;
}

API

• <ngx-password-strength-meter>

Used to calculate and display the strength of a provided password

option	bind	type	default	description
password	Input()	string	-	the password to calculate its strength
enableFeedback	Input()	boolean	false	whether can display feedback
enableLengthRule	Input()	boolean	true	whether to validate the length of the password
min	Input()	number	8	the minimum length of the password
max	Input()	number	30	the maximum length of the password
strengthChange	Output()	number	-	emits the strength of the provided password in number e.g: 0, 1, 2, 3, 4

• 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');
  }
}