A visual indicator that provides real-time feedback on password complexity based on length, letters, numbers, and special characters.
Strong
Playground
<ply-password-strength password="Sup3rSecret!">Password Strength</ply-password-strength>
Pass the password string to the [password] input. The meter automatically calculates the score and renders the appropriate progress segments.
<ply-input-group> <ply-label>New Password</ply-label> <input ply-input type="password" [(ngModel)]="password"> </ply-input-group> <ply-password-strength [password]="password"></ply-password-strength>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add password-strength
// Paths are relative to aliases.components (default: src/app/components)
import { PasswordStrengthComponent } from './password-strength/password-strength.component';
@Component({
selector: 'app-password-strength-example',
imports: [
PasswordStrengthComponent
],
template: `...`
})
export class PasswordStrengthExampleComponent {}Install
npx ply-ui-cli add password-strength
Run the following command to add this component to your project:
npx ply-ui-cli add password-strength
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add password-strength
// Paths are relative to aliases.components (default: src/app/components)
import { PasswordStrengthComponent } from './password-strength/password-strength.component';
@Component({
selector: 'app-your-component',
imports: [
PasswordStrengthComponent
],
template: `...`
})
export class YourComponent {} API for password-strength — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-password-strength | password | string | '' | — |
Content