Password Strength Meter for Angular 18

A customizable and updated password strength meter library for Angular applications, built using Angular 18 with standalone component support.

Password Strength Meter use zxcvbn to estimate the strength of the password and also provide a visual feedback with suggestions and warning messages.

Password Strength Meter use zxcvbn to estimate the strength of the password and also provide a visual feedback with suggestions and warning messages.

Features

• Updated to Angular v18.
• Full support for standalone component architecture.
• Visual password strength feedback with suggestions and warnings.
• Uses zxcvbn for robust password strength estimation.
• Customizable styles, behavior, and feedback.

Demo

Live Demo

Installation

Install the library and its dependencies:

npm install @zxcvbn-ts/core @zxcvbn-ts/language-en password-strength-meter

Usage

Step 1: Import and Use the Component

Import the PasswordStrengthMeterComponent directly into your application as it supports standalone components.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PasswordStrengthMeterComponent } from 'password-strength-meter';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, PasswordStrengthMeterComponent],
  template: `
    <input [(ngModel)]="password" type="password" placeholder="Enter password" />
    <password-strength-meter [password]="password" enableFeedback></password-strength-meter>
  `,
})
export class AppComponent {
  password: string = '';
}

Step 2: Configure zxcvbn Service

To enable the default zxcvbn service for password strength estimation, configure your application as shown below:

import { bootstrapApplication } from '@angular/platform-browser';
import { ApplicationConfig } from '@angular/core';
import { provideZxvbnServiceForPSM } from 'password-strength-meter/zxcvbn';

export const appConfig: ApplicationConfig = {
  providers: [provideZxvbnServiceForPSM()],
};

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

Customization

Override zxcvbn Options

You can customize the zxcvbn service by providing a custom configuration:

import { translations } from '@zxcvbn-ts/language-en';
import { provideZxvbnServiceForPSM, ZxvbnConfigType } from 'password-strength-meter/zxcvbn';

const zxvbnConfig: ZxvbnConfigType = {
  translations: translations,
};

export const appConfig: ApplicationConfig = {
  providers: [provideZxvbnServiceForPSM(zxvbnConfig)],
};

Customize the Password Strength Service

You can override the default password strength meter service by implementing the IPasswordStrengthMeterService interface.

import { Injectable } from '@angular/core';
import { IPasswordStrengthMeterService, FeedbackResult } from 'password-strength-meter';

@Injectable()
export class CustomPasswordStrengthService extends IPasswordStrengthMeterService {
  score(password: string): number {
    return password.length > 10 ? 4 : 2;
  }

  scoreWithFeedback(password: string): FeedbackResult {
    return {
      score: this.score(password),
      feedback: { warning: '', suggestions: [] },
    };
  }
}

API Reference

| Property | Bind | Type | Default Value | Description | |--------------------------|:--------:|:--------:|---------------------------------------------------|--------------------------------------------------------------------------------------------------| | password | Input() | string | null | The password string to evaluate. | | minPasswordLength | Input() | number | 8 | Minimum password length to evaluate. | | enableFeedback | Input() | boolean | false | Whether to show feedback messages for strength evaluation. | | numberOfProgressBarItems | Input() | number | 5 | The number of segments in the progress bar. | | enableAsync | Input() | boolean | false | Whether to calculate password strength asynchronously. | | colors | Input() | string[] | ['darkred', 'orangered', 'orange', 'yellowgreen', 'green'] | Custom colors for progress bar segments, matching password strength levels (0–4). | | strengthChange | Output() | number | null | Emits the calculated strength score for the provided password (0–4). |

License

This project is licensed under the MIT License.