Git Product home page Git Product logo

angular2-password-strength-bar's Introduction

angular2-password-strength-bar

This is a fork of rnadler/ng2-password-strength-bar

Install in your project

npm install angular2-password-strength-bar --save

Using the Component

Add Component to Module imports

import { PasswordStrengthBar } from 'angular2-password-strength-bar';
...
@NgModule({
 ...
   declarations: [
        AppComponent,
        PasswordStrengthBar,
        ...
    ],
    imports: [
      BrowserModule,
      FormsModule,
      ...
 ...
})
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>
            <angular2-password-strength-bar
                [passwordToCheck]="account.password"
                [barLabel]="barLabel">
            </angular2-password-strength-bar>
        </form>        
    </div>
  `,
})
export class App {
    public account = {
        password: <string>null
    };
    public barLabel: string = "Password strength:";
    // ...
}

Parameters

<angular2-password-strength-bar (strengthChanged)="strengthChanged($event)" [passwordToCheck]="account.password" [barLabel]="barLabel"> </angular2-password-strength-bar>

Out Parameters

strengthChanged (type: eventEmitter)

  • Emits updated strength if any changes occurred

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.

Run the example application locally

  • git clone https://github.com/roaringbits/angular2-password-strength-bar.git
  • cd angular2-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

License

MIT

angular2-password-strength-bar's People

Contributors

rnadler avatar

Watchers

James Cloos avatar K. avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.