This an Angular 16+ implementation of ng2-password-strength-bar.
npm install ngx-password-strength-bar --save
git clone https://github.com/yutamago/ngx-password-strength-bar.git
cd ngx-password-strength-bar
npm install
npm run build ngx-password-strength-bar
npm run start ngx-password-strength-bar-app
# Open browser to http://localhost:4200
- Same as above, except for the last step do:
npm run test ngx-password-strength-bar-app
# Will run the tests once with the Firefox browser
import { NgxPasswordStrengthBarModule } from 'ngx-password-strength-bar';
//...
@NgModule({
//...
declarations: [
AppComponent,
//...
],
imports: [
BrowserModule,
FormsModule,
NgxPasswordStrengthBarModule,
//...
//...
})
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>
<ngx-password-strength-bar
[passwordToCheck]="account.password"
[barLabel]="barLabel"
[customThresholds]="thresholds"
[barColors]="myColors">
</ngx-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'];
public thresholds = [90, 75, 45, 25];
// ...
}
<ngx-password-strength-bar
[passwordToCheck]="account.password"
[barLabel]="barLabel"
[barColors]="myColors"
[baseColor]="baseColor"
[strengthLabels]="strengthLabels"
[customThresholds]="thresholds"
(onStrengthChanged)="strengthChanged($event)">
</ngx-password-strength-bar>
- The variable containing the password to check.
- The variable containing the label displayed to the left of the bar.
- 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']
- 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';
- 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!)'];
- The variable can be used to define custom strength algorithm thresholds.
- This must be an Array of 4 integers. See the source code for details on how these values are used.
- If not specified, the default is:
[90, 70, 40, 20]
- 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;
}