> Superb password strength visualization for Angular 7.
Last updated 2 years ago by danielpdev .
Original npm · Tarball · package.json
$ cnpm install lib-psv 
SYNC missed versions from official npm registry.


Superb password strength visualization for Angular 7.


This is a Angular 7 directive used as port of an awesome Codrops Article by Mary Lou (original source).


npm i --save lib-psv


Check out the Demo to see it in action.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxPSVModule } from "lib-psv";
import { AppRoutes, routes } from './routes';
import { Demo1Component } from './demo1.component';
import { Demo2Component } from './demo2.component';
import { AppComponent } from './app.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

<input lib-psv 
  [psvFeedbackModel]="{ '0': 'Worst', '1': 'Bad', '2': 'Weak', '3': 'Good', '4': 'Strong' }"

Changing the psvDirection string property to NORMAL (default is NORMAL) will typically result in a cleaner progressive image when a key down event occurred. If psvDirection changes to REVERSE, will typically result in a blurred progressive image when a key up event occurred.


Property Type Default Description
psvDirection string 'NORMAL'|'REVERSE' Whether image should turn progressively clear or blurred when a key down event occurred
psvFeedbackModel any { '0': 'Worst', '1': 'Bad', '2': 'Weak', '3': 'Good', '4': 'Strong' } Feedback model is the object that contains the keys and values that correspond used to display in the element under the input.
(psvScoreChanged) EventEmitter<number> EventEmitter Emitted when the password score changes
(psvPxFactorChanged) EventEmitter<number> EventEmitter Emitterd when the pxFactor used to change the image is changed
psvCanvasWrapper HTMLElement null The parent HTML element of the psvCanvas element.
psvCanvas HTMLCanvasElement null The canvas in which the image is drawn to
psvPoster HTMLElement null The HTMLElement that needs to have a style property defined containing background-image with a valid value
psvFeedback HTMLElement null The HTMLElement which property innerHTML will be changed when if the psvFeedbackModel is set
psvOptions object null Object containing all the properties that are used to initialize lib-psv

I've tried to keep the properties and behavior exactly the same as in the original codrops version.



This module was bootstrapped with angular-cli so it's using the common build/test/lint commands from angular-cli.


  • Build: ng build lib-psv
  • Test: ng test lib-psv
  • Lint: ng lint lib-psv


  • See it in action: ng serve


Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram


This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. MIT © danielpdev

Current Tags

  • 0.0.2                                ...           latest (2 years ago)

2 Versions

  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 2
Dependencies (2)
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © |