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:

Change to PasswordStrengthBarModule and add this to the imports section of the @NgModule metadata instead of the declarations (shown below), or
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)