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.
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
npm install ng2-password-strength-bar --save
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.
import { PasswordStrengthBarModule } from 'ng2-password-strength-bar';
//...
@NgModule({
//...
declarations: [
AppComponent,
//...
],
imports: [
BrowserModule,
FormsModule,
PasswordStrengthBarModule,
//...
//...
})
export class AppModule {}
@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'];
// ...
}
<ng2-password-strength-bar
[passwordToCheck]="account.password"
[barLabel]="barLabel"
[barColors]="myColors"
[baseColor]="baseColor"
[strengthLabels]="strengthLabels"
(onStrengthChanged)="strengthChanged($event)">
</ng2-password-strength-bar>
- The variable containing the password to check.
- The variable containing the label displayed to the left of the bar.
(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']
(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';
(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!)'];
- 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;
}
git clone https://github.com/rnadler/ng2-password-strength-bar.gitcd ng2-password-strength-barnpm installnpm start# Browser should open automatically on http://localhost:3000
- Same as above, except for the last step do:
npm run test-once# Defaults to a Firefox browser
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
