This angular password strength counter is used to calculate and display the strength password so that the visitor can choose the best strongest password. You can use our Secure Password generator tool to generate secure, strong, and unpredictable passwords easily. It is used to display the password strength with visual feedback. PasswordStrengthMeter uses zxcvbn to estimate password strength and also provides visual feedback with suggestions and warning messages.
Password Strength Meter For angular 10
Get Started
Step 1: Since this lib was depending upon the zxcvbn lib, install it first
npm install zxcvbn3 --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
<password-strength-meter [password]="password"></password-strength-meter>
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 the source code.
This awesome script is developed by antoantonyk. Visit their official repository for more information and follow for future updates.