Skip to main content

Ngx Strength Meter

Continuous Integration codecov npm downloads npm latest package Average time to resolve an issue Follow me

Ngx Strength Meter

Angular widget for password strength estimation using zxcvbn, simple and pretty.

If you 👍 this project, consider giving it a ★, thanks! 🙌

Installation​

npm install @eisberg-labs/ngx-strength-meter --save

Usage​

First import to your module:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    StrengthMeterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

And use in your component html


<form [formGroup]="form" name="form">
    <mat-form-field>
        <input name="password" matInput placeholder="Input password" type="password" formControlName="password">
    </mat-form-field>
    <strength-meter [value]="form.value.password" (measure)="onStrengthChange($event)"></strength-meter>
</form>

Demo​

API​

Inputs​

  • value: string - The password input for which the strength will be calculated.

Outputs​

  • measure: EventEmitter<number> - Emits the strength score (0 to 4) when the strength is calculated. Explanations on the meaning of grades is here, but you can guess that 0 is bad, 4 is good.

Sponsors​

If you find this project useful, give it a star. You could also consider supporting us through the following platforms:

As this project grows, I will showcase sponsors' logos and links in this section. Thank you for your support!

Contact​

Feel free to reach out to me on LinkedIn.

License​

This project is MIT licensed.