Free directive that formats a native <input> as the user types. Pair it with ply-input for styling — behavior stays separate from presentation.
Add plyMask with a pattern string. Tokens: 0 digit, A letter, S alphanumeric. Everything else is a literal. Angular forms receive the masked display value.
— · Raw: —<ply-input-group> <ply-label>Phone</ply-label> <input ply-input plyMask="(000) 000-0000" [(ngModel)]="phone" /> </ply-input-group> <input ply-input plyMask="00/00/0000" placeholder="MM/DD/YYYY" /> <input ply-input plyMask="AAAA-0000" /> <input ply-input plyMask="SSS-000" />
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add input-mask
// Paths are relative to aliases.components (default: src/app/components)
import { BaseMaskDirective } from './input-mask/input-mask.directive';
@Component({
selector: 'app-input-mask-example',
imports: [
BaseMaskDirective
],
template: `...`
})
export class InputMaskExampleComponent {}Install
npx ply-ui-cli add input-mask
| Token | Accepts |
|---|---|
0 | Digit 0-9 |
A | Letter a-zA-Z |
S | Alphanumeric a-zA-Z0-9 |
| Other | Literal (e.g. () / -) |
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add input-mask
// Paths are relative to aliases.components (default: src/app/components)
import { BaseMaskDirective } from './input-mask/input-mask.directive';
@Component({
selector: 'app-input-mask-example',
imports: [
BaseMaskDirective
],
template: `...`
})
export class InputMaskExampleComponent {}Install
npx ply-ui-cli add input-mask
Import unmaskInputValue (or call unmaskedValue() on the directive) when you need raw characters for an API. Example: (555) 123-4567 → 5551234567.
import { unmaskInputValue } from './input-mask/input-mask.directive';
const raw = unmaskInputValue('(555) 123-4567', '(000) 000-0000');
// '5551234567'TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add input-mask
// Paths are relative to aliases.components (default: src/app/components)
import { BaseMaskDirective } from './input-mask/input-mask.directive';
@Component({
selector: 'app-input-mask-example',
imports: [
BaseMaskDirective
],
template: `...`
})
export class InputMaskExampleComponent {}Install
npx ply-ui-cli add input-mask
Run the following command to add this directive to your project:
npx ply-ui-cli add input-mask
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 input-mask
// Paths are relative to aliases.components (default: src/app/components)
import { BaseMaskDirective } from './input-mask/input-mask.directive';
@Component({
selector: 'app-your-component',
imports: [
BaseMaskDirective
],
template: `...`
})
export class YourComponent {} API for input-mask — generated from JSDoc in the library source.
| API | Member | Type | Description |
|---|---|---|---|
input[plyMask] | plyMask | string | Mask pattern applied while typing. Tokens: `0` = digit, `A` = letter, `S` = alphanumeric. Other characters are literals. |
Content