Nunjucks Powers Mozilla

    This package has been deprecated

    Author message:

    ngx-material-password-strength has been renamed to @angular-material-extensions/password-strength. Please update your dependencies

    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    ngx-material-password-strength - Material password strength meter to indicate how secure is the provided password - Angular v6 supported

    npm version, npm Join the chat at Coverage Status dependency Status devDependency Status Greenkeeper Badge license

    This project has been moved to @angular-material-extensions/password-strength




    View all the directives in action at

    Library's components

    • <ngx-material-password-strength> used to calculate and display the strength of a provided password
    1. strength score less than 20%

    ngx-material-password-strength score less than 20%

    1. strength score less than 40%

    ngx-material-password-strength score less than 40%

    1. strength score less than 100%

    ngx-material-password-strength score less than 100%

    • <ngx-material-password-strength-info> used to display more information about the strength of a provided password

    ngx-material-password-strength's info

    Requirements (peer dependencies):

    npm i @angular/cdk @angular/material @angular/animations 


    • Angular (requires Angular 2 or higher, tested with 6.0.4)


    Install above dependencies via npm.

    Now install ngx-material-password-strength via:

    npm install --save ngx-material-password-strength


    Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for ngx-material-password-strength:

    map: {
      'ngx-material-password-strength': 'node_modules/ngx-material-password-strength/bundles/ngx-material-password-strength.umd.js',

    Once installed you need to import the main module:

    import { NgxMaterialPasswordStrengthModule } from 'ngx-material-password-strength';

    The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgxMaterialPasswordStrengthModule .forRoot()):

    import { NgxMaterialPasswordStrengthModule } from 'ngx-material-password-strength';
      declarations: [AppComponent, ...],
      imports: [NgxMaterialPasswordStrengthModule.forRoot(), ...],  
      bootstrap: [AppComponent]
    export class AppModule {

    Other modules in your application can simply import NgxMaterialPasswordStrengthModule:

    import { NgxMaterialPasswordStrengthModule } from 'ngx-material-password-strength';
      declarations: [OtherComponent, ...],
      imports: [NgxMaterialPasswordStrengthModule, ...], 
    export class OtherModule {


    <ngx-material-password-strength> used to calculate and display the strength of a provided password

    option bind type default description
    password Input() string - the password to calculate its strength
    externalError Input() boolean false used to change the color of the password to warn if an external error occurs
    onStrengthChanged Output() number - emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100%

    <ngx-material-password-strength-info> used to display more information about the strength of a provided password

    option bind type default description
    passwordComponent Input() PasswordStrengthComponent - the password component used in the template in order to display more info related to the provided password



    add the ngx-material-password-strength element to your template:


    This will display only the material password strength meter in form of a progress without any input fields or similar.

    In the following example, we integration a material input container with ngx-material-password-strength 's component.

      <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
                  <input matInput #password
                  <mat-hint align="end" aria-live="polite">
                    {{password.value.length}} / 25
                <ngx-material-password-strength #passwordComponent

    learn more about mat-form-field

    Example of how to use the emitted strength of the password in your template

    <div fxLayout="row" fxLayoutGap="10px">
                    <div *ngIf="passwordComponent.strength === 100; then done else error">
                    <ng-template #done>
                      <mat-icon color="primary">done</mat-icon>
                    <ng-template #error>
                      <mat-icon color="warn">error</mat-icon>
                      <p>Password's strength = {{passwordComponent.strength}} %100</p>

    Client Side password's validation using a built in angular formController

    1. add an input element to your template with an appropriate ngx-material-password-strength's component
    2. hold a reference of the ngx-material-password-strength's component by adding passwordComponentWithValidation (or whatever you want) inside the element


     <ngx-material-password-strength #passwordComponentWithValidation
    1. bind the form controller of the ngx-material-password-strength to the input element
    • you can access the form controller of ngx-material-password-strength using the chile view --> passwordComponentWithValidation.passwordFormControl
    • bind the form controller to an input element --> [formControl]="passwordComponentWithValidation.passwordFormControl"
    1. Full example - see below
      <mat-form-field appearance="outline" style="width: 100%">
        <input matInput #passwordWithValidation
        <mat-hint align="end" aria-live="polite">
          {{passwordWithValidation.value.length}} / 25
        <mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('required')">
          Password is required
        <mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('pattern')">
          Password is not valid
      <ngx-material-password-strength #passwordComponentWithValidation
      <!--Password's strength info-->

    this will looks like -->


    Please checkout the full documentation here or follow the official tutorial

    Run Demo App Locally

    $ git clone
    • link the ngx-material-password-strength package
    $ gulp link

    use gulp locally

    $ npx gulp link

    for some mac os users, you may use the sudo command with gulp use gulp with sudo

    $ sudo gulp link

    or locally

    $ sudo npx gulp link
    • navigate to the demo app directory
    cd demo
    • install the dependencies
    $ npm i
    • run/start/serve the app
    $ npm run start


    $ ng serve --open
    • the app is now hosted by http://localhost:4200/


    To generate all *.js, *.d.ts and *.metadata.json files:

    $ npm run build

    To lint all *.ts files:

    $ npm run lint

    Other Angular Libraries


    Drop an email to: Anthony Nahas and I will help you!


    Copyright (c) 2018 anthonynahas. Licensed under the MIT License (MIT)


    npm i ngx-material-password-strength

    DownloadsWeekly Downloads






    Unpacked Size

    132 kB

    Total Files


    Last publish


    • anthonynahas