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.
npm install ng2-password-strength-bar --save
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">
</ng2-password-strength-bar>
</form>
</div>
`,
})
export class App {
public account = {
password: <string>null
};
public barLabel: string = "Password strength:";
// ...
}
<ng2-password-strength-bar [passwordToCheck]="account.password" [barLabel]="barLabel"> </ng2-password-strength-bar>
- The variable containing the password to check.
- The variable containing the label displayed to the left of the bar.
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
- Same as above, except for the last step do:
npm run test-once
# Defaults to a Firefox browser