ng2-password-strength-bar

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

• See Angular 2 Password Strength Bar for details of the changes since the Angular 1 original.
• See Publishing an Angular 2 Component NPM Package for some explanation of this project.

Try it live!

Angular 9 Support

If you are using Angular 9+ you will need to use ng9-password-strength-bar.

The only configuration differences between the ng2 and ng9 versions are these name changes:

• ng2-password-strength-bar --> ng9-password-strength-bar
• PasswordStrengthBarModule --> Ng9PasswordStrengthBarModule

Install in your project

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

Version Update Note

If you upgrade from v1.0.x to v1.1.x (or greater) you will need to change the PasswordStrengthBar import. There are two options:

1. Change to PasswordStrengthBarModule and add this to the imports section of the @NgModule metadata instead of the declarations (shown below), or
2. Change to PasswordStrengthBarComponent and update the name in the declarations section to match.

Using the Component

Add Component to Module imports

import { PasswordStrengthBarModule } from 'ng2-password-strength-bar';
//...
@NgModule({
 //...
   declarations: [
        AppComponent,
        //...
    ],
    imports: [
      BrowserModule,
      FormsModule,
      PasswordStrengthBarModule,
      //...
 //...
})
export class AppModule {}

Add Component to your Application

@Component({
    selector: 'my-app',
    template: `
  <h3>Angular 2 Password Strength Bar</h3>
    <div>
       <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>
            <ng2-password-strength-bar
                [passwordToCheck]="account.password"
                [barLabel]="barLabel"
                [barColors]="myColors">
            </ng2-password-strength-bar>
        </form>
    </div>
  `,
})

export class App {
    public account = {
        password: <string>null
    };
    public barLabel: string = "Password strength:";
    public myColors = ['#DD2C00', '#FF6D00', '#FFD600', '#AEEA00', '#00C853'];
    // ...
}

Parameters

<ng2-password-strength-bar
  [passwordToCheck]="account.password"
  [barLabel]="barLabel"
  [barColors]="myColors"
  [baseColor]="baseColor"
  [strengthLabels]="strengthLabels"
  (onStrengthChanged)="strengthChanged($event)">
</ng2-password-strength-bar>

Input Parameters

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.

barColors (type: Array<string>, optional)

(New in v1.2.0)

• The variable can be used to define custom bar colors.
• This must be an Array of 5 strings.
• Lowest security level picks colors[0], ..., the highest picks colors[4].
• If not specified, the default is: ['#F00', '#F90', '#FF0', '#9F0', '#0F0']

baseColor (type: string, optional)

(New in v1.2.1)

• The variable can be used to define the color of bars when no strength is applied (i.e. when there is no password text).
• If not specified, the default is: '#DDD'. For example:

public baseColor = '#FFF';

strengthLabels (type: Array<string>, optional)

(New in v1.2.1)

• The variable can be used to define a strength label that will be appended to the colored bars.
• This must be an Array of 5 strings. For example:

public strengthLabels = ['(Useless)', '(Weak)', '(Normal)', '(Strong)', '(Great!)'];

Output Parameters

onStrengthChanged(strength: number) optional

• Event triggered when the password changes.
• Takes a single number parameter (the new password strength with value 0 to 4).

strengthChanged(strength: number) {
  this.strength = strength;
}

Run the example application locally

• git clone https://github.com/rnadler/ng2-password-strength-bar.git
• 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

License

MIT