Password Strength Meter for Angular

import { AuiPasswordStrengthMeter } from '@absoluteui/angular/password-strength-meter';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Password Strength Meter page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { passwordStrengthMeter: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { AuiPasswordInput } from '@absoluteui/angular/password-input';
import { AuiPasswordStrengthMeter } from '@absoluteui/angular/password-strength-meter';

@Component({
  selector: 'app-sign-up',
  imports: [ReactiveFormsModule, AuiPasswordInput, AuiPasswordStrengthMeter],
  template: `
    <aui-password-input label="New password" autocomplete="new-password" [formControl]="password"></aui-password-input>
    <aui-password-strength-meter [value]="password.value"></aui-password-strength-meter>
  `,
})
export class SignUpComponent {
  readonly password = new FormControl('', { nonNullable: true });
}

<aui-password-strength-meter>

Class AuiPasswordStrengthMeter; template reference #ref="auiPasswordStrengthMeter".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Visible heading. Default: localized “Password strength”.
input	PasswordStrengthTarget		Input to follow (Password Input, Text Input, or the element).
value	string		Evaluate this value instead of following an input (framework bindings).
requirements	readonly PasswordRequirement[]		Checklist rules. Default: defaultPasswordRequirements().
evaluate	PasswordStrengthEvaluator		Scoring. Default: defaultPasswordEvaluator (advisory).
icons	Partial<PasswordStrengthMeterIcons>		Icon slot overrides.
showRequirements	boolean	true	Render the requirements checklist.
announce	boolean	true	Announce the rating and requirement count politely after typing pauses (1 s).
locale	string	'en-US'	Message and number-formatting locale.

Outputs

Output	Payload	Description
(changed)	PasswordStrengthMeterChangeDetail	The rating or a requirement changed after user input. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
attach(target: PasswordStrengthTarget): void	Follow an input.
detach(): void	Stop following the input.