CngxPasswordStrengthMeter
projects/common/display/password-strength-meter/password-strength-meter.component.ts
Import#
import { CngxPasswordStrengthMeter } from '@cngx/common/display'
Description#
Decorative password-strength meter - four segments that fill with the 0..4
score. Pairs with CngxPasswordStrength, which owns the live
announcement; the meter is aria-hidden so it never double-announces what
the directive already says.
Takes a score, not a password, so it carries no forms dependency and stays
a Level-2 visual atom beside CngxBadge/CngxCheckboxIndicator. Render it
from the directive's signal, or drive it from any 0..4 source. All colours
and sizes are --cngx-password-strength-meter-* custom properties; the
filled colour keys off the data-strength host attribute.
<input cngxPasswordStrength #pw="cngxPasswordStrength" type="password" />
<cngx-password-strength-meter [score]="pw.score()" />Metadata#
Host#
Track A CSS for <cngx-password-strength-meter>. Structural flex row of four
segments; every gap / size / colour is a --cngx-password-strength-meter-*
custom property with a plain, framework-neutral fallback. The Material
mapping (these vars onto --mat-sys-*) lives in the bridge at
@cngx/themes/material/password-strength-meter-theme, not here - the default
theme carries no Material dependency.