Overview

The NgxPasswordStrengthMeter is password strength meter for Angular used to calculate and display the strength and/or feedback of a provided password.

To display the strength of the password with a visual feedback.

!screenshot

Dependecies

- zxcvbn: To estimate the strength of the password and also provide a feedback with suggestions and warning messages.

Get Started

Step 1: Install ngx-password-strength-meter

``sh
npm install ngx-password-strength-meter --save

or

yarn add ngx-password-strength-meter --save
`

Step 2: Import the library

`ts
import { NgxPasswordStrengthMeter } from 'ngx-password-strength-meter';

@NgModule({
declarations: [AppComponent, ...],
imports: [NgxPasswordStrengthMeter, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
`

Step 3: Add the ngx-password-strength-meter element to your template

`html

`

Changing meter colors

You can change the colors of meter by overriding the CSS variables bellow

| variable | default |
| :-------------------------- | :-----------------------------------------------------------------------: |
| --strength-meter-background | !#dddddd #dddddd |
| --strength-meter-score-0 | !#8b0000 #8b0000 |
| --strength-meter-score-1 | !#ff4500 #ff4500 |
| --strength-meter-score-2 | !#ffa500 #ffa500 |
| --strength-meter-score-3 | !#9acd32 #9acd32 |
| --strength-meter-score-4 | !#008000 #008000 |

`css
.strength-meter {
--strength-meter-score-0: #668811 !important;
--strength-meter-background: rgb(0, 38, 250) !important;
}
`

API

-

Used to calculate and display the strength of a provided password

| option | bind | type | default | description |
| :--------------- | :--------: | :-------: | :-----: | :----------------------------------------------------------------------- |
| password | Input() | string | - | the password to calculate its strength |
| enableFeedback | Input() | boolean | false | whether can display feedback |
| enableLengthRule | Input() | boolean | true | whether to validate the length of the password |
| min | Input() | number | 8 | the minimum length of the password |
| max | Input() | number | 30 | the maximum length of the password |
| strengthChange | Output() | number | - | emits the strength of the provided password in number e.g: 0, 1, 2, 3, 4 |

- NgxPasswordStrengthMeterService

Service provided that can be used to get strength of a password

`ts
export class AppComponent implements OnInit {
constructor(private passwordStrengthMeterService: NgxPasswordStrengthMeterService) {}

ngOnInit() {
const result = this.passwordStrengthMeterService.calculate('123');
}
}
``