International Telephone Input - Angular (ngx-intl-telephone-input)

About Package

Ngx-Intl-Telephone-Input is an Angular Plugin that validates user's input, provides formatting for (both national and international) phone numbers and triggers an event on every keystroke. (See Sample Output to have a better idea about event triggered).

It has a dropdown showing information about country flag, name and dial-code. Depending upon the options selected, adds placeholder according to selected country and formats the input.

(Refer to OPTIONS Section for more details)

Dependencies

Ngx-Intl-Telephone-Input has only one dependency, awesome-phonenumber v3.3.0 for formatting and validating user's input. You need to add this package as well before using intl-tel-input.

Comparison with other libraries

Although, there are a lot of packages out there but this package has some advantanges over them. The first one being dependencies. The package itself is inspired from NgxIntlTelInput (Do check them as well), that has 2 dependencies but this package has only 1 dependency and that too for formatting and validations. The dependency size is also small.

The second one is the way Ngx-Intl-Telephone-Input formats user input. It comes with As You Type Formatting that formats user's input on every keystroke depending on the validation status. For example when user starts typing any number, the formatter checks the validation status based on NATIONAL OR INTERNATIONAL (according to selection) and formats the number once it is valid.

Please refer to DEMO section for more insights!

Supported Phone Formats

This package supports only national and international formats for phone number formatting and validation.

NATIONAL -> (0321 1234567)
INTERNATIONAL -> (+92 321 1234567)

Demo

Click HERE to watch the demo video.

Note: This Demo video is recorded with specific options. The main idea is to highlight the formatting and validation.

Installation

You need to add dependency and install package as follows:

npm i awesome-phonenumber@3.3.0
npm i ngx-intl-telephone-input

Note: Don't forget to add awesome-phonenumber@3.3.0 or else it will not work properly.

Basic Usage

Import

Add NgxIntlTelephoneInputModule into your module file:

import { NgxIntlTelephoneInputModule } from "ngx-intl-telephone-input";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxIntlTelephoneInputModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example

<intl-telephone-input
  [preferredCountries]="[CountryISO.Pakistan, CountryISO.India]"
  [enablePlaceholder]="true"
  [searchCountryFlag]="true"
  [separateDialCode]="false"
  [enableAutoCountrySelect]="true"
  [searchCountryField]="SearchCountryField.All"
  [phoneValidation]="false"
  [numberFormat]="PhoneNumberFormat.International"
  [inputId]="'phone'"
  (onChange)="onInputChange($event)"
>
</intl-telephone-input>

(Refer to OPTIONS Section for more details)

Note: Don't forget to add CountryISO, SearchCountryField and PhoneNumberFormat enums into your .ts file. Add below line of code to import all of them.

import {
  CountryISO,
  PhoneNumberFormat,
  SearchCountryField,
} from "ngx-intl-telephone-input";

Output Sample

onChange() will emit such an event on every keystroke.

{
  "phoneNumber": "+92 304 6219062",
  "selectedCountry": "Pakistan (‫پاکستان‬‎)",
  "iso2Code": "pk",
  "dialCode": "92",
  "numberFormat": "INTERNATIONAL",
  "isNumberValid": true
}

Options

Sr.	Parameters	Data Type	Default Value	Description
01	cssClass	string	''	Custom CSS Class that'll be added to phone number's input element.
02	preferredCountries	(CountryISO)[]	[]	List of countries, that will appear at the top saperated by horizental line from all countries.
03	onlyCountries	(CountryISO)[]	[]	List of countries, that will appear in the dropdown. Preferred countries will depends upon this list.
04	enableAutoCountrySelect	boolean	true	If true and INTERNATIONAL format is enabled, will detect and will automatically change the selected country according to number entered.
05	enablePlaceholder	boolean	true	If true, Enables and sets Input placeholder text, according to the country selected.
06	customPlaceholder	string | null	null	Custom string to be inserted as a placeholder in phone number Input tag.
07	numberFormat	PhoneNumberFormat	PhoneNumberFormat.International	Enables NATIONAL or INTERNATIONAL formatting.
08	searchCountryFlag	boolean	false	Enables search Input for countries in the dropdown.
09	searchCountryField	SearchCountryField	SearchCountryField.All	Allows to search country by name, dial-code, iso2 and by all if searchCountryFlag is enabled. Use SearchCountryField enum.
10	searchCountryPlaceholder	string	'Search Country'	Sets placeholder for search country Input.
11	maxLength	number | null	null	Maximum characters allowed in input.
12	selectFirstCountry	boolean	true	Selects first country from preferredCountries if it is set. If not then uses main list.
13	phoneValidation	boolean	true	Toggle validation on user input. If true, will give feedback to user on every keystroke.
14	inputId	string	'phone'	Unique ID for Input tag in html.
15	selectedCountryISO	CountryISO | null	null	Set specified country on load.
16	separateDialCode	boolean	false	Saperate Dial code from user input and will appear next to country flag.
17	onChange	EventEmitter<InputValue>	new EventEmitter<InputValue>	Emits input value entered along with validation staus on every keystroke.

Note: Please refer to CountryISO, SearchCountryField, PhoneNumberFormat and InputValue to get more idea.

Contributions

• Fork repository
• Update ./projects/ngx-intl-telephone-input (Add features/Resolve Bugs)
• Build and test the library
• Update ./src/app component with new functionality
• Update README.md
• Create pull request

Contact Information

OKASHA KHAN | FullStack JavaScript Developer

• 📧 okashakhan4141@gmail.com
• LinkedIn 👉 https://www.linkedin.com/in/okashakhan4141
• Github 👉 https://github.com/okashakhan4141