ui-phone-input

A simple @angular/ionic based phone input component

Install

npm install ui-phone-input --save

or

yarn add ui-phone-input

Usage

Import the UiPhoneInputModule in your Module

import { UiPhoneInputModule } from 'ui-phone-input';

@NgModule({
  imports: [UiPhoneInputModule],
})
export class Module {}

Use ui-phone-input component in your template

<ui-phone-input
  [value]="phoneNumber"
  (ionChangePhoneNumber)="phoneNumber = $event"
  (ionChangeValidity)="isValid = $event"
  (ionChangeCountry)="country = $event"
  placeholder="[phone]"
>
</ui-phone-input>

API

Inputs

@Input	Purpose	Type
value	The telephone number	string
placeholder	Input placeholder	string
country	Country ISO code	string (2 character ISO code, defaults to 'US')
noResultsText	Text to be displayed when searching countries	string (Defaults to 'No Results')

Outputs

@Output	Purpose
ionChangePhoneNumber	Triggered when the phone number changes value and can be parsed.
ionChangeCountry	Triggered when the country changes value.
ionChangeValidity	Triggered when the phone number validity changes.

Features

• Emoji Based Flag Support
• Emits parsed phone number with country code
• Emits ISO country code
• Automatic search when country dialog is open. Just type to search.

Nice to Haves / TODOS

• Test coverage
• A11y audit (keyboard controls, etc..)
• Additional internationalization coverage