1.2.5 • Published 3 years ago
ng2-password-strength-bar v1.2.5
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.
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 pickscolors[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