Password

The password primitive is a form control that lets users reveal and hide the contents of a password field with an accessible toggle button.

Import

Import the Password primitives from ng-primitives/password.

import { NgpPassword, NgpPasswordInput, NgpPasswordToggle } from 'ng-primitives/password';

Usage

Assemble the password directives in your template. ngpPasswordInput is a complete input (it composes ngpInput internally), so you do not add ngpInput separately. Keep type="password" on the field so it renders masked from the start; the toggle switches it to text and back.

<div ngpFormField>
  <label ngpLabel>Password</label>
  <div ngpPassword #password="ngpPassword">
    <input ngpPasswordInput type="password" autocomplete="current-password" />
    <button ngpButton ngpPasswordToggle>
      <ng-icon [name]="password.isVisible() ? 'lucideEyeOff' : 'lucideEye'" />
    </button>
  </div>
</div>

Reusable Component

Create a password component that uses the NgpPassword directive.

Schematics

Generate a reusable password component using the Angular CLI.

ng g ng-primitives:primitive password

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• styles: How component styles should be generated. css (default) includes the full example styles; unstyled omits them entirely so you can style the component yourself.
• example-styles (deprecated): still supported for compatibility - true maps to styles: css, false maps to styles: unstyled.

API Reference

The following directives are available to import from the ng-primitives/password package:

NgpPassword

NgpPasswordInput

NgpPasswordToggle

Global Configuration

You can configure the default labels and announcements for all password primitives in your application by using the providePasswordConfig function in a providers array.

import { providePasswordConfig } from 'ng-primitives/password';

bootstrapApplication(AppComponent, {
  providers: [
    providePasswordConfig({
      showLabel: 'Show password',
      hideLabel: 'Hide password',
      shownAnnouncement: 'Your password is shown',
      hiddenAnnouncement: 'Your password is hidden',
      ignorePasswordManagers: false,
    }),
  ],
});

Accessibility

The toggle button is a real <button> element with type="button" and aria-controls pointing at the input. Its accessible label swaps between "Show password" and "Hide password", and visibility changes are announced to screen readers via a live region rather than exposing the password itself.

For security, the input reverts to type="password" when its form is submitted, so browsers never cache a revealed password as an autocomplete suggestion.