JavaScript TypeScript HTML


Build Status npm version

This an Angular 2 implementation of AngularJS Directive to test the strength of a password.

Try it live!

Install in your project

npm install ng2-password-strength-bar --save

Using the Component

Add Component to Module imports

import { PasswordStrengthBar } from 'ng2-password-strength-bar';
   declarations: [
    imports: [
export class AppModule {}

Add Component to your Application

    selector: 'my-app',
    template: `
  <h3>Angular 2 Password Strength Bar</h3>
       <form name="myForm" novalidate>
            <input type="password" class="form-control" id="password" name="password" placeholder="Enter password"
                 [(ngModel)]="account.password" #password="ngModel" 
                 minlength="5" maxlength="50" required>
export class App {
    public account = {
        password: <string>null
    public barLabel: string = "Password strength:";
    // ...

Input Parameters

<ng2-password-strength-bar [passwordToCheck]="account.password" [barLabel]="barLabel"> </ng2-password-strength-bar>

passwordToCheck (type: string)

  • The variable containing the password to check.

barLabel (type: string)

  • The variable containing the label displayed to the left of the bar.

Run the example application locally

  • git clone
  • cd ng2-password-strength-bar
  • npm install
  • npm start # Browser should open automatically on http://localhost:3000

Run the tests locally

  • Same as above, except for the last step do:
  • npm run test-once # Defaults to a Firefox browser