ngx-p-world-phone-input

Angular/PrimeNG World Phone Number Input (NgxPWorldPhoneInput)

An Angular package designed to help international phone number inputting in angular applications.It uses PrimeNG (https://primeng.org/) components as base and FlagCDN (https://flagcdn.com/) as flag image provider. It helps validating inputted number as it clears out on invalid input.

Version Compatibility

Library/Framework	Angular	PrimeNG
ngx-p-world-phone-input	16.2.0	16.2.0

Installation

Install Command

# npm i ngx-p-world-phone-input

Usage

Importing

Import the WorldPhoneInputModule from this package into your app.module or the desired module

import { WorldPhoneInputModule } from 'ngx-p-world-phone-input';

Use Example

my-component.html

<ngx-world-phone-input 
  [(phone)]="modeledPhone.phone" 
  [(ddi)]="modeledPhone.ddi">
</ngx-world-phone-input>

my-component.ts

modeledPhone: any = {
    ddi: "55",
    phone: [phone]
  }

Api

Properties

Name	Type	Default	Description
ddi	string	"55"	The ddi / phone code for the selected country.
phone	any	null	The modeled phone number (without ddi)
language	string	"pt-BR"	The language to use (currently supports only pt-BR and en-US)

Events

Name	Type	Description
ddiChange	EventEmitter	Fires when ddi selection changes
phoneChange	EventEmitter	Fires when phoneNumber changes

Todo (Future Projects)

• Enable visual feedback on invalid state
• Add validation options
• Add / Remove countries as an option
• Add support for other languages
• Add documentation on styling

Library Contributions

• Fork repo.
• Update ./projects/ngx-intl-tel-input
• Build / test library.
• Update ./src/app with new functionality.
• Update README.md
• Pull request.

Special Thanks

FlagCDN for flag package [https://flagcdn.com/]

@Webcat12345 for original idea / inspiration (ngx-int-tel-input)