{"id":13808895,"url":"https://github.com/angular-material-extensions/password-strength","last_synced_at":"2025-05-15T00:08:47.011Z","repository":{"id":37588019,"uuid":"128676592","full_name":"angular-material-extensions/password-strength","owner":"angular-material-extensions","description":"Angular UI library to illustrate and validate a password's strength with material design ","archived":false,"fork":false,"pushed_at":"2024-10-29T04:57:15.000Z","size":49720,"stargazers_count":284,"open_issues_count":25,"forks_count":75,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-10-29T22:51:35.473Z","etag":null,"topics":["angular-library","confrimation","material","material-extensions","materialdesign","password","password-safety","password-strength","strength","strength-score"],"latest_commit_sha":null,"homepage":"https://angular-material-extensions.github.io/password-strength","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular-material-extensions.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"angular-material-extensions","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":"npm/@angular-material-extensions/password-strength","community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://github.com/AnthonyNahas","anahas.de"]}},"created_at":"2018-04-08T19:53:27.000Z","updated_at":"2024-08-11T08:54:00.000Z","dependencies_parsed_at":"2022-07-12T16:32:27.587Z","dependency_job_id":"dde1e3e5-942e-4d62-8fbe-e2417287741b","html_url":"https://github.com/angular-material-extensions/password-strength","commit_stats":{"total_commits":529,"total_committers":13,"mean_commits":40.69230769230769,"dds":0.1172022684310019,"last_synced_commit":"53300e86ecb138c9077de5019106a21824198fe4"},"previous_names":["anthonynahas/ngx-material-password-strength"],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-material-extensions%2Fpassword-strength","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-material-extensions%2Fpassword-strength/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-material-extensions%2Fpassword-strength/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-material-extensions%2Fpassword-strength/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-material-extensions","download_url":"https://codeload.github.com/angular-material-extensions/password-strength/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248781274,"owners_count":21160704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-library","confrimation","material","material-extensions","materialdesign","password","password-safety","password-strength","strength","strength-score"],"created_at":"2024-08-04T01:01:54.441Z","updated_at":"2025-04-13T20:38:17.472Z","avatar_url":"https://github.com/angular-material-extensions.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"angular-material-extensions's logo\"\n   height=\"256px\" width=\"256px\" style=\"text-align: center;\" \n   src=\"https://cdn.jsdelivr.net/gh/angular-material-extensions/password-strength@master/assets/angular-material-extensions-logo.svg\"\u003e\n\u003c/p\u003e\n\n# @angular-material-extensions/password-strength - Material password strength meter to indicate how secure is the provided password\n\n[![npm version](https://badge.fury.io/js/%40angular-material-extensions%2Fpassword-strength.svg)](https://badge.fury.io/js/%40angular-material-extensions%2Fpassword-strength)\n[![npm demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://angular-material-extensions.github.io/password-strength)\n[![docs: typedoc](https://img.shields.io/badge/docs-typedoc-4D0080.svg)](https://angular-material-extensions.github.io/password-strength/doc/index.html)\n[![Join the chat at https://gitter.im/angular-material-extensions/Lobby](https://badges.gitter.im/angular-material-extensions/Lobby.svg)](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![CircleCI branch](https://img.shields.io/circleci/project/github/angular-material-extensions/password-strength/master.svg?label=circleci)](https://circleci.com/gh/angular-material-extensions/password-strength)\n[![Build Status](https://travis-ci.org/angular-material-extensions/password-strength.svg?branch=master)](https://travis-ci.org/angular-material-extensions/password-strength)\n[![codecov](https://codecov.io/gh/angular-material-extensions/password-strength/branch/master/graph/badge.svg)](https://codecov.io/gh/angular-material-extensions/password-strength)\n[![dependency Status](https://david-dm.org/angular-material-extensions/password-strength/status.svg)](https://david-dm.org/angular-material-extensions/password-strength)\n[![devDependency Status](https://david-dm.org/angular-material-extensions/password-strength/dev-status.svg?branch=master)](https://david-dm.org/angular-material-extensions/password-strength#info=devDependencies)\n[![Greenkeeper Badge](https://badges.greenkeeper.io/angular-material-extensions/password-strength.svg)](https://greenkeeper.io/)\n[![license](https://img.shields.io/github/license/angular-material-extensions/password-strength.svg?style=flat-square)](https://github.com/angular-material-extensions/password-strength/blob/master/LICENSE)\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/gdi2290/awesome-angular)\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"@angular-material-extensions/password-strength demonstration\" style=\"text-align: center;\"\n   src=\"https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v3.2.0/demo.gif\"\u003e\n\u003c/p\u003e\n\n## Built by and for developers :heart:\n\nDo you have any question or suggestion ? Please do not hesitate to contact us!\nAlternatively, provide a PR | open an appropriate issue [here](https://github.com/angular-material-extensions/password-strength/issues)\n\nIf you like this project, support [angular-material-extensions](https://github.com/angular-material-extensions)\nby starring :star: and sharing it :loudspeaker:\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Components](#components)\n- [Dependencies](#dependencies)\n- [Installation](#installation)\n- [API](#api)\n- [Usage](#usage)\n- [Run Demo App Locally](#run-demo-app-locally)\n- [Development](#development)\n- [Other Angular Libraries](#other-angular-libraries)\n- [Support](#support)\n- [License](#license)\n\n\u003ca name=\"demo\"/\u003e\n\n## [Demo](https://angular-material-extensions.github.io/password-strength)\n\nView all the directives and components in action at [https://angular-material-extensions.github.io/password-strength](https://angular-material-extensions.github.io/password-strength)\n\n\u003ca name=\"components\"/\u003e\n\n## Library's components\n\n- `\u003cmat-password-strength\u003e` used to calculate and display the strength of a provided password\n\n1. strength score \u003c= 20%\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"@angular-material-extensions/password-strength score less than 20%\" style=\"text-align: center;\"\n   src=\"https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v2.1.0/scrore_lesst_than_20.png\"\u003e\n\u003c/p\u003e\n\n2. strength score \u003c= 80%\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"@angular-material-extensions/password-strength score less than 40%\" style=\"text-align: center;\"\n   src=\"https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v2.1.0/scrore_lesst_than_40.png\"\u003e\n\u003c/p\u003e\n\n1. strength score \u003e 80%\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"@angular-material-extensions/password-strength score less than 100%\" style=\"text-align: center;\"\n   src=\"https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v2.1.0/scrore_lesst_than_100.png\"\u003e\n\u003c/p\u003e\n\n- `\u003cmat-password-strength-info\u003e` used to display more information about the strength of a provided password\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"@angular-material-extensions/password-strength's info\" style=\"text-align: center;\"\n   src=\"https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v2.1.0/ngx-material-strength-password-info.png\"\u003e\n\u003c/p\u003e\n\n- `\u003cmat-pass-toggle-visibility\u003e` used to show/hide the password provided in the input element\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"@angular-material-extensions/password-strength's info\" style=\"text-align: center;\"\n   src=\"https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v3.6.0/mat-pass-toggle-visibility.gif\"\u003e\n\u003c/p\u003e\n\n---\n\n\u003ca name=\"dependencies\"/\u003e\n\n## Dependencies\n* [Angular](https://angular.io) developed and tested with `15.x`\n\n---\n\n\u003ca name=\"installation\"/\u003e\n\n## [Installation](https://angular-material-extensions.github.io/password-strength/getting-started)\n\n## 1. Install via _ng add_. (Recommended)\n\nIf Angular Material Design is not setup, just run `ng add @angular/material` [learn more](https://material.angular.io/guide/getting-started)\n\nNow add the library via the `angular schematics`\n\n```shell\nng add @angular-material-extensions/password-strength\n```\n\n## 2. Install via _npm_. (Alternative)\n\nNow install `@angular-material-extensions/password-strength` via:\n\n```shell\nnpm install --save @angular-material-extensions/password-strength\n```\n\n---\n\n##### SystemJS\n\n\u003e **Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.\n\u003e In your systemjs config file, `map` needs to tell the System loader where to look for `@angular-material-extensions/password-strength`:\n\n```js\n{\n  '@angular-material-extensions/password-strength';: 'node_modules/@angular-material-extensions/password-strength/bundles/password-strength.umd.js',\n}\n```\n\n`-\u003e follow the instructions` [here](https://github.com/angular-material-extensions/password-strength/tree/master/docs/INSTRUCTIONS.md)\n\n---\n\n## Import the library\n\nOnce installed you need to import the main module:\n\n```js\nimport { MatPasswordStrengthModule } from \"@angular-material-extensions/password-strength\";\n```\n\nThe only remaining part is to list the imported module in your application module. The exact method will be slightly\ndifferent for the root (top-level) module for which you should end up with the code similar to (notice ` MatPasswordStrengthModule .forRoot()`):\n\n```js\nimport { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';\n\n@NgModule({\n  declarations: [AppComponent, ...],\n  imports: [MatPasswordStrengthModule.forRoot(), ...],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nOther modules in your application can simply import `MatPasswordStrengthModule`:\n\n```js\nimport { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';\n\n@NgModule({\n  declarations: [OtherComponent, ...],\n  imports: [MatPasswordStrengthModule, ...],\n})\nexport class OtherModule {\n}\n```\n\n\u003ca name=\"api\"/\u003e\n\n## API\n\n### `\u003cmat-password-strength\u003e` used to calculate and display the strength of a provided password - [see the demo examples](https://angular-material-extensions.github.io/password-strength/examples)\n\n| option                    |    bind    |   type    | default | description                                                                      |\n| :------------------------ | :--------: | :-------: | :-----: | :------------------------------------------------------------------------------- |\n| password                  | `Input() ` |  string   |    -    | the password to calculate its strength                                           |\n| customValidator           | `Input() ` |  RegExp   |    -    | custom regex validator                                                           |\n| externalError             | `Input() ` | `boolean` | `false` | used to change the color of the password to warn if an external error occurs     |\n| enableLengthRule          | `Input() ` | `boolean` | `true`  | whether to validate the length of the password                                   |\n| enableLowerCaseLetterRule | `Input() ` | `boolean` | `true`  | whether a lowercase letter is optional                                           |\n| enableUpperCaseLetterRule | `Input() ` | `boolean` | `true`  | whether a uppercase letter is optional                                           |\n| enableDigitRule           | `Input() ` | `boolean` | `true`  | whether a digit char is optional                                                 |\n| enableSpecialCharRule     | `Input() ` | `boolean` |  true   | whether a special char is optional                                               |\n| min                       | `Input() ` | `number`  |    8    | the minimum length of the password                                               |\n| max                       | `Input() ` | `number`  |   30    | the maximum length of the password                                               |\n| warnThreshold             | `Input() ` | `number`  |   21    | password strength less than this number shows the warn color                     |\n| accentThreshold           | `Input() ` | `number`  |   81    | password strength less than this number shows the accent color                   |\n| onStrengthChanged         |  Output()  | `number`  |    -    | emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100% |\n\n### `\u003cmat-password-strength-info\u003e` used to display more information about the strength of a provided password - [see the demo examples](https://angular-material-extensions.github.io/password-strength/examples/mat-password-strength-info)\n\n| option                  |    bind    |           type            |                           default                           | description                                                                                                |\n| :---------------------- | :--------: | :-----------------------: | :---------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------- |\n| passwordComponent       | `Input() ` | PasswordStrengthComponent |                              -                              | the password component used in the template in order to display more info related to the provided password |\n| enableScoreInfo         | `Input() ` |         `boolean`         |                           `false`                           | whether to show the password's score in %                                                                  |\n| lowerCaseCriteriaMsg    | `Input() ` |         `string`          |            contains at least one lower character            | an appropriate msg for the lower case %                                                                    |\n| upperCaseCriteriaMsg    | `Input() ` |         `string`          |            contains at least one upper character            | an appropriate msg for the upper case %                                                                    |\n| digitsCriteriaMsg       | `Input() ` |         `string`          |            contains at least one digit character            | an appropriate msg for the digit case %                                                                    |\n| specialCharsCriteriaMsg | `Input() ` |         `string`          |           contains at least one special character           | an appropriate msg for the special case %                                                                  |\n| customCharsCriteriaMsg  | `Input() ` |         `string`          |           contains at least one custom character            | an appropriate msg for the custom validator case %                                                         |\n| minCharsCriteriaMsg     | `Input() ` |         `string`          | contains at least \\${this.passwordComponent.min} characters | an appropriate msg for the minimum `number` of chars %                                                     |\n\n### `\u003cmat-pass-toggle-visibility\u003e` used to show/hide the password provided in the input element\n\n| option    |    bind    |   type    | default | description                                                     |\n| :-------- | :--------: | :-------: | :-----: | :-------------------------------------------------------------- |\n| isVisible | `Input() ` | `boolean` | `false` | whether the password is visible or hidden                       |\n| tabindex  | `Input() ` | `string`  | `null`  | set the desired tabindex value of the toggle visibility button. |\n\n---\n\n\u003ca name=\"usage\"/\u003e\n\n## [Usage](https://angular-material-extensions.github.io/password-strength/getting-started)\n\nadd the `@angular-material-extensions/password-strength` element to your template:\n\n```html\n\u003cmat-password-strength [password]=\"password.value\"\u003e \u003c/mat-password-strength\u003e\n```\n\nThis will display only the material password strength meter in form of a progress without any input fields\nor similar.\n\n### In the following example, we integration a material input container with `@angular-material-extensions/password-strength` 's component.\n\nNOTE: In order to repaint the mat-form-field correctly after changing the value of the password's strength, please consider\nto change the detection strategy for the parent component --\u003e\n\n```typescript\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  OnInit,\n  ViewEncapsulation,\n} from \"@angular/core\";\nimport { Title } from \"@angular/platform-browser\";\nimport { MatSlideToggleChange } from \"@angular/material\";\nimport { MatPasswordStrengthComponent } from \"@angular-material-extensions/password-strength\";\n\n@Component({\n  selector: \"app-home\",\n  templateUrl: \"./home.component.html\",\n  styleUrls: [\"./home.component.scss\"],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HomeComponent implements OnInit {}\n```\n\n```html\n\u003cdiv\u003e\n  \u003cmat-form-field\n    appearance=\"outline\"\n    style=\"width: 100%\"\n    [color]=\"passwordComponent.color\"\n  \u003e\n    \u003cmat-label\u003ePassword\u003c/mat-label\u003e\n    \u003cinput\n      matInput\n      #password\n      [type]=\"inputType\"\n      required\n      placeholder=\"Password\"\n    /\u003e\n    \u003cmat-hint align=\"end\" aria-live=\"polite\"\u003e\n      {{password.value.length}} / 25\n    \u003c/mat-hint\u003e\n  \u003c/mat-form-field\u003e\n\n  \u003cmat-password-strength\n    #passwordComponent\n    (onStrengthChanged)=\"onStrengthChanged($event)\"\n    [password]=\"password.value\"\n  \u003e\n  \u003c/mat-password-strength\u003e\n\u003c/div\u003e\n```\n\n[learn more about mat-form-field](https://material.angular.io/components/input/overview)\n\n### Example of how to use the emitted strength of the password in your template\n\n```html\n\u003cdiv fxLayout=\"row\" fxLayoutGap=\"10px\"\u003e\n  \u003cdiv *ngIf=\"passwordComponent.strength === 100; then done else error\"\u003e\u003c/div\u003e\n  \u003cng-template #done\u003e\n    \u003cmat-icon color=\"primary\"\u003edone\u003c/mat-icon\u003e\n  \u003c/ng-template\u003e\n  \u003cng-template #error\u003e\n    \u003cmat-icon color=\"warn\"\u003eerror\u003c/mat-icon\u003e\n  \u003c/ng-template\u003e\n  \u003cdiv\u003e\n    \u003cp\u003ePassword's strength = {{passwordComponent.strength}} %100\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Use the toggle visibility component\n\n- add the `mat-pass-toggle-visibility` to your `mat-form-field`\n- give it a name to use it in the html file like `toggle`\n- set the type of the input to that value emitted from the `mat-pass-toggle-visibility` component `\u003cinput matInput [type]=\"toggle.type\"/\u003e`\n\n```html\n\u003cmat-form-field\n  appearance=\"outline\"\n  style=\"width: 100%\"\n  [color]=\"passwordComponent.color\"\n\u003e\n  \u003cmat-label\u003ePassword\u003c/mat-label\u003e\n  \u003c!-- HERE DOWN :D--\u003e\n  \u003cmat-pass-toggle-visibility #toggle matSuffix\u003e\u003c/mat-pass-toggle-visibility\u003e\n  \u003c!-- THERE ABOVE ;)--\u003e\n  \u003cinput\n    matInput\n    #password\n    [type]=\"toggle.type\"\n    required\n    placeholder=\"Password\"\n  /\u003e\n  \u003cmat-hint align=\"end\" aria-live=\"polite\"\u003e\n    {{password.value.length}} / 25\n  \u003c/mat-hint\u003e\n\u003c/mat-form-field\u003e\n```\n\n### Client Side password's validation using a built in angular formController\n\n1. add an input element to your template with an appropriate @angular-material-extensions/password-strength's component\n2. hold a reference of the @angular-material-extensions/password-strength's component by adding `passwordComponentWithValidation` (or whatever you want) inside the element\n\ne.g:\n\n```html\n\u003cmat-password-strength\n  #passwordComponentWithValidation\n  [password]=\"passwordWithValidation.value\"\n\u003e\n\u003c/mat-password-strength\u003e\n```\n\n3. bind the form controller of the mat-password-strength to the input element\n\n- you can access the form controller of @angular-material-extensions/password-strength using the chile view --\u003e `passwordComponentWithValidation.passwordFormControl`\n- bind the form controller to an input element --\u003e `[formControl]=\"passwordComponentWithValidation.passwordFormControl\"`\n\n4. Full example - see below\n\n```html\n\u003cdiv\u003e\n  \u003cmat-form-field appearance=\"outline\" style=\"width: 100%\"\u003e\n    \u003cmat-label\u003ePassword\u003c/mat-label\u003e\n    \u003cinput\n      matInput\n      #passwordWithValidation\n      [type]=\"inputType\"\n      required\n      [formControl]=\"passwordComponentWithValidation.passwordFormControl\"\n      placeholder=\"Password\"\n    /\u003e\n    \u003cmat-hint align=\"end\" aria-live=\"polite\"\u003e\n      {{passwordWithValidation.value.length}} / 25\n    \u003c/mat-hint\u003e\n    \u003cmat-error\n      *ngIf=\"passwordComponentWithValidation.passwordFormControl.hasError('required')\"\n    \u003e\n      Password is required\n    \u003c/mat-error\u003e\n    \u003cmat-error\n      *ngIf=\"passwordComponentWithValidation.passwordFormControl.hasError('pattern')\"\n    \u003e\n      Password is not valid\n    \u003c/mat-error\u003e\n  \u003c/mat-form-field\u003e\n  \u003cmat-password-strength\n    #passwordComponentWithValidation\n    (onStrengthChanged)=\"onStrengthChanged($event)\"\n    [password]=\"passwordWithValidation.value\"\n  \u003e\n  \u003c/mat-password-strength\u003e\n  \u003c!--Password's strength info--\u003e\n  \u003cmat-password-strength-info\n    [passwordComponent]=\"passwordComponentWithValidation\"\n  \u003e\n  \u003c/mat-password-strength-info\u003e\n\u003c/div\u003e\n```\n\nthis will looks like --\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"@angular-material-extensions/password-strength\" style=\"text-align: center;\"\n   src=\"https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v2.1.0/demo_with_validation.gif\"\u003e\n\u003c/p\u003e\n\n---\n\n### custom regex validation\n\nplease consider to use the `customValidator` input (see below)\n\n```html\n\u003cmat-slide-toggle #toggle\u003eShow Password Details\u003c/mat-slide-toggle\u003e\n\n\u003cmat-form-field\n  appearance=\"outline\"\n  style=\"width: 100%\"\n  [color]=\"passwordComponent.color\"\n\u003e\n  \u003cmat-label\u003ePassword\u003c/mat-label\u003e\n  \u003cmat-pass-toggle-visibility\n    #toggleVisbility\n    matSuffix\n  \u003e\u003c/mat-pass-toggle-visibility\u003e\n  \u003cinput\n    matInput\n    #password\n    [type]=\"toggleVisbility.type\"\n    placeholder=\"Password\"\n  /\u003e\n  \u003cmat-hint align=\"end\" aria-live=\"polite\"\u003e\n    {{password.value.length}} / {{passwordComponent.max}}\n  \u003c/mat-hint\u003e\n\u003c/mat-form-field\u003e\n\n\u003cmat-password-strength\n  #passwordComponent\n  (onStrengthChanged)=\"onStrengthChanged($event)\"\n  [password]=\"password.value\"\n  [customValidator]=\"pattern\"\n\u003e\n\u003c/mat-password-strength\u003e\n\n\u003cmat-password-strength-info\n  *ngIf=\"toggle.checked\"\n  [passwordComponent]=\"passwordComponent6\"\n  customCharsCriteriaMsg=\"1 german special chars is required\"\n  [enableScoreInfo]=\"true\"\n\u003e\n\u003c/mat-password-strength-info\u003e\n```\n\n```ts\npattern = new RegExp(/^(?=.*?[äöüÄÖÜß])/);\n```\n\n### Confirm the password with built in angular form controllers - [see the live example](https://angular-material-extensions.github.io/password-strength)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"@angular-material-extensions/password-strength with confirmation feature\" style=\"text-align: center;\"\n   src=\"https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v3.8.0/confirm01.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"@angular-material-extensions/password-strength with confirmation feature \" style=\"text-align: center;\"\n   src=\"https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v3.8.0/confirm02.png\"\u003e\n\u003c/p\u003e\n\n### Use always the green color for a strong password just by adding the `green` css class to the `mat-password-strength`\n\n```html\n\u003cmat-password-strength\n  #passwordComponent\n  class=\"green\"\n  [password]=\"password.value\"\n\u003e\n\u003c/mat-password-strength\u003e\n```\n\n### Supporting custom messages and ngx-translate for the info component please check the example demo [here](https://angular-material-extensions.github.io/password-strength/examples/mat-password-strength-info)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"@angular-material-extensions/password-strength demonstration\" style=\"text-align: center;\"\n   src=\"https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/v3.4.0/support_translations.png\"\u003e\n\u003c/p\u003e\n\nfor more examples please visit this URL : [(https://angular-material-extensions.github.io/password-strength/examples]((https://angular-material-extensions.github.io/password-strength/examples)\n\nPlease checkout the full documentation [here](https://angular-material-extensions.github.io//password-strength/doc/index.html)\nor follow the official [tutorial](https://angular-material-extensions.github.io/password-strength/getting-started)\n\n---\n\n\u003ca name=\"run-demo-app-locally\"/\u003e\n\n### [ Run Demo App Locally](https://github.com/angular-material-extensions/password-strength/tree/master/docs/INSTRUCTIONS_DEMO.md)\n\n\u003ca name=\"development\"/\u003e\n\n### [Development](https://github.com/angular-material-extensions/password-strength/tree/master/docs/INSTRUCTIONS_DEV.md)\n\n## Other Angular Libraries\n\n- [ngx-auth-firebaseui](https://github.com/AnthonyNahas/ngx-auth-firebaseui)\n- [ngx-mailto](https://github.com/AnthonyNahas/ngx-mailto)\n- [ngx-linkifyjs](https://github.com/AnthonyNahas/ngx-linkifyjs)\n- [@angular-material-extensions/google-maps-autocomplete](https://github.com/angular-material-extensions/google-maps-autocomplete)\n- [@angular-material-extensions/select-country](https://github.com/angular-material-extensions/select-country)\n- [@angular-material-extensions/select-icon](https://github.com/angular-material-extensions/select-icon)\n- [@angular-material-extensions/fab-menu](https://github.com/angular-material-extensions/fab-menu)\n- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)\n- [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)\n- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)\n- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)\n- [@angular-material-extensions/combination-generator](https://github.com/angular-material-extensions/combination-generator)\n\n---\n\n\u003ca name=\"support\"/\u003e\n\n## Support\n\n- Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de)\n- or open an appropriate [issue](https://github.com/angular-material-extensions/password-strength/issues)\n- let us chat on [Gitter](https://gitter.im/angular-material-extensions/Lobby)\n\nBuilt by and for developers :heart: we will help you :punch:\n\n---\n\n\n## Who is using this library? Awesome apps?\n\n1. [Nahaus.de - Digitale und automatisierte Immobilienverwaltung Software für privat Vermieter und Hausverwaltungen](https://nahaus.de)\n\n\nAre you missing your project or you app? PR me to publish it on the README\n\n---\n\n---\n\n![jetbrains logo](https://raw.githubusercontent.com/angular-material-extensions/password-strength/HEAD/assets/jetbrains-variant-4_logos/jetbrains-variant-4.png)\n\nThis project is supported by [jetbrains](https://www.jetbrains.com/) with 1 ALL PRODUCTS PACK OS LICENSE incl. [webstorm](https://www.jetbrains.com/webstorm)\n\n---\n\n\u003ca name=\"license\"/\u003e\n\n## License\n\nCopyright (c) 2019-2023 [Anthony Nahas](https://github.com/AnthonyNahas). Licensed under the MIT License (MIT)\n","funding_links":["https://github.com/sponsors/angular-material-extensions","https://tidelift.com/funding/github/npm/@angular-material-extensions/password-strength","https://github.com/AnthonyNahas","anahas.de"],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-material-extensions%2Fpassword-strength","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-material-extensions%2Fpassword-strength","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-material-extensions%2Fpassword-strength/lists"}