Ngx Strength Meter

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

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

Table of Contents

• Installation
• Usage
• Demo
• API
• Changelog
• Code of Conduct
• Contributing
• Sponsors
• Contact
• License

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

View Demo and Documentation

API

Inputs

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

Outputs

• measure: EventEmitter: 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.

Changelog

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

Code of Conduct

I follow the Rust Code of Conduct.

Contributing

Everyone is welcome to contribute. You can read more about contributing here.

Sponsors

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

• Become a GitHub Sponsor
• Support me on Patreon

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.