Skip to main content
cngx-src documentation

CngxPasswordStrength

DirectivePrimaryv0.2.0WCAG AA

projects/forms/input/password-strength.directive.ts

Import#

import { CngxPasswordStrength } from '@cngx/forms/input'

Description#

Live password-strength feedback for a password field.

Place on the <input>. Reads the value on every (input), derives a PasswordStrengthResult through the swappable CNGX_PASSWORD_STRENGTH_FACTORY, and exposes score() (0..4), label() and the whole strength() result as signals - render your own meter or pair it with <cngx-password-strength-meter [score]>. The label is announced politely and debounced so a screen reader is not spammed mid-keystroke, while score()/label() stay live for the visual.

The announced string flows through the CNGX_INPUT_CONFIG.ariaLabels.passwordStrength template (English by default, consumer-overridable). The empty field is not announced.

<input cngxInput cngxPasswordStrength #pw="cngxPasswordStrength" type="password" />
<cngx-password-strength-meter [score]="pw.score()" />

https://cngxjs.github.io/cngx/examples/#/forms/input/password-strength

Metadata#

Host#

Index#

HostListeners

HostListeners#

EventHandler
(input)input()