Toggles a password input between type="password" and type="text"
CngxPasswordToggle
DirectivePrimaryv0.1.0WCAG AA
projects/forms/input/password-toggle.directive.ts
Import#
import { CngxPasswordToggle } from '@cngx/forms/input'
Description#
Toggles a password input between type="password" and type="text".
Place on the same <input> element (works with or without cngxInput).
Exposes a visible signal and toggle() method for binding a toggle button.
<input cngxInput cngxPasswordToggle #pwd="cngxPasswordToggle" type="password" />
<button type="button" (click)="pwd.toggle()" [attr.aria-label]="pwd.visible() ? 'Hide password' : 'Show password'">
{{ pwd.visible() ? 'Hide' : 'Show' }}
</button>