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.

Password Strength Meter For angular 8

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.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.