Password Strength Meter For angular 8
To display the strength of the password with a visual feedback. PasswordStrengthMeter use zxcvbn to estimate the strength of the password and also provide a visual feedback with suggestions and warning messages. Useful for choosing strong password by user.
Get Started
Step 1: Since this lib was depending upon the zxcvbn lib, install it first
npm install [email protected] --save
Step 2: Install password-strength-meter
npm install angular-password-strength-meter --save
Step 3: Import Password Strength Meter Module into your app module
....
import { PasswordStrengthMeterModule } from 'angular-password-strength-meter';
....
@NgModule({
...
imports: [
....
PasswordStrengthMeterModule
],
....
})
export class AppModule { }
Step 4: use the password-strength-meter component in your app.component.ts
ts
API
option | bind | type | default | description |
---|---|---|---|---|
password | Input() | string | – | password to calculate its strength |
minPasswordLength | Input() | number | 8 | min length of password to calculate the strength |
enableFeedback | Input() | boolean | false | to show/hide the suggestions and warning messages |
colors | Input() | string[] | [‘darkred’, ‘orangered’, ‘orange’, ‘yellowgreen’, ‘green’] | to overide the meter colors, password strength range is 0 – 4, for strength 0 equals first color in the array and so on |
strengthChange | Output() | number | – | emits the strength of the provided password in number -> range 0 – 4 |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome script developed by antoantonyk. Visit their official repository for more information and follow for future updates.