To display the strength of the password with a visual feedback.
Password Strength Meter use zxcvbn to estimate the strength of the password and also provide a visual feedback with suggestions and warning messages.
This lib was developed based on the following tutorial.
How then is password strength measured? Dropbox developed an algorithm for a realistic password strength estimator inspired by password crackers. This algorithm is packaged in a Javascript library called zxcvbn. In addition, the package contains a dictionary of commonly used English words, names and passwords.
Need lib for Vue.js? Click here
<password-strength-meter [password]="password"></password-strength-meter>Step 1: npm install (For Angular v17)
npm install @zxcvbn-ts/core@^3.0.0 @zxcvbn-ts/language-en@^3.0.0 angular-password-strength-meter --saveFor Angular v15
npm install @zxcvbn-ts/core@^3.0.0 @zxcvbn-ts/language-en@^3.0.0 angular-password-strength-meter@^8.0.0 --saveOptional Packages: zxcvbn packagase are not required if PasswordStrengthMeterModule is using with a custom implementation of IPasswordStrengthMeterService .
Step 2: Use the provideZxvbnServiceForPSM in appConfig
.... import { bootstrapApplication } from '@angular/platform-browser'; import { ApplicationConfig } from '@angular/core'; import { provideZxvbnServiceForPSM } from 'angular-password-strength-meter/zxcvbn'; .... export const appConfig: ApplicationConfig = { providers: [provideZxvbnServiceForPSM()], }; bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err) );Step 3: Import the PasswordStrengthMeterComponent component in your app.component.ts
.... import { PasswordStrengthMeterComponent } from 'angular-password-strength-meter'; .... @Component({ selector: 'app-root', standalone: true, imports: [ CommonModule, PasswordStrengthMeterComponent, ], templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { password: string = ''; }Step 4: use the password-strength-meter component in your app.component.html
<password-strength-meter [password]="password" enableFeedback />You can override the default zxcvbn options by providing the config to provideZxvbnServiceForPSM(config?: ZxvbnConfigType)
.... import { bootstrapApplication } from '@angular/platform-browser'; import { ApplicationConfig } from '@angular/core'; import { translations } from '@zxcvbn-ts/language-en'; import { provideZxvbnServiceForPSM, ZxvbnConfigType } from 'angular-password-strength-meter/zxcvbn'; .... const zxvbnConfig: ZxvbnConfigType = { translations: translations, }; export const appConfig: ApplicationConfig = { providers: [provideZxvbnServiceForPSM(zxvbnConfig)], }; bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err) );Refer to the zxcvbn documentation for more information.
You can override the default password strength meter service by providing the Custom Service class
.... import { Injectable } from '@angular/core'; import { IPasswordStrengthMeterService } from 'angular-password-strength-meter'; @Injectable() export class CustomPsmServiceService extends IPasswordStrengthMeterService { score(password: string): number { // TODO - return score 0 - 4 based on password return 1; } scoreWithFeedback(password: string): FeedbackResult { // TODO - return score with feedback return { score: 1, feedback: { warning: '', suggestions: [] } }; } scoreAsync(password: string): Promise<number> { // TODO - do some async operation return new Promise(); } scoreWithFeedbackAsync(password: string): Promise<FeedbackResult> { // TODO - do some async operation return new Promise(); } } .... @Component({ selector: 'app-custom-service', standalone: true, imports: [CommonModule, FormsModule, PasswordStrengthMeterComponent], providers: [ { provide: IPasswordStrengthMeterService, useClass: CustomPsmServiceService, }, ], templateUrl: './custom-service.component.html', styleUrl: './custom-service.component.scss', }) export class CustomServiceComponent { text: string = ''; score: number | null = null; public onPasswordStrengthChange(score: number | null) { this.score = score; } }| 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 |
| numberOfProgressBarItems | Input() | number | 5 | change the number to update the number of progress bar items |
| enableAsync | Input() | boolean | false | to do the score calculation in async mode |
| 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. Note - length of the colors array should match the number of progress bar items |
| strengthChange | Output() | number | - | emits the strength of the provided password in number -> range 0 - 4 |