A custom form control that combines a country code selector with a text input, automatically emitting international format phone numbers.
Use <ply-phone-input> natively with Angular Forms. It implements ControlValueAccessor.
Bound Value: +441234567890
<ply-label>Contact Number</ply-label> <ply-phone-input [(ngModel)]="phoneNumber"></ply-phone-input>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add phone-input
// Paths are relative to aliases.components (default: src/app/components)
import { PhoneInputComponent } from './phone-input/phone-input.component';
@Component({
selector: 'app-phone-input-example',
imports: [
PhoneInputComponent
],
template: `...`
})
export class PhoneInputExampleComponent {}Install
npx ply-ui-cli add phone-input
Run the following command to add this component to your project:
npx ply-ui-cli add phone-input
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 phone-input
// Paths are relative to aliases.components (default: src/app/components)
import { PhoneInputComponent } from './phone-input/phone-input.component';
@Component({
selector: 'app-your-component',
imports: [
PhoneInputComponent
],
template: `...`
})
export class YourComponent {} API for phone-input — generated from JSDoc in the library source.
| API | Member | Type | Description |
|---|---|---|---|
ply-phone-input | — | — | A phone number input component with a country selector. |
Content