Angular Phone Number

A comprehensive international phone number input component for Angular applications with country selection, validation, and formatting.

Installation

To install the Angular Phone Number package, run the following command:

1npm i angular-phone-number

This package implements country-specific validations using libphonenumber-js.

Install the required dependencies:

1npm i libphonenumber-js -D

Flag Assets Setup

Important: To display country flags correctly, you need to copy the flag assets to your project:

1. Copy the flag assets from the package to your project:

   1cp -r node_modules/angular-phone-number/assets/flags src/assets

2. Ensure your Angular project is configured to include the assets folder in your angular.json file:

   1"assets": [
   2  "src/favicon.ico",
   3  "src/assets"
   4],

Usage

Import the AngularPhoneNumber module into your module file:

1import { AngularPhoneNumber } from 'angular-phone-number';

Add AngularPhoneNumber to your module imports:

1@NgModule({
2  imports: [AngularPhoneNumber]
3})
4export class AppModule { }

This package displays country names in both Arabic and English.

Example

Here is an example of how to use the Angular Phone Number component in your application:

1@Component({
2  selector: 'app-root',
3  template: `
4    <form [formGroup]="myForm">
5      <angular-phone-number
6        formControlName="phoneNumber"
7        [defaultCountry]="'LK'"
8        [preferredCountries]="['LK', 'IN', 'GB']"
9        [error]="myForm.get('phoneNumber')?.touched && myForm.get('phoneNumber')?.invalid"
10        (countryChanged)="onCountryChanged($event)"
11        (inputChanged)="onInputChanged($event)"
12      ></angular-phone-number>
13    </form>
14  `,
15  styles: []
16})
17export class AppComponent {
18  myForm: FormGroup = new FormGroup({
19    phoneNumber: new FormControl(''),
20  });
21  
22  onCountryChanged(event: any) {
23    console.log('Country changed:', event);
24  }
25
26  onInputChanged(event: any) {
27    console.log('Input changed:', event);
28  }
29}

Options

The following options are available for the Angular Phone Number component:

Option	Type	Default	Description
defaultCountry	string	null	Set the default country from the list.
preferredCountries	string[]	All countries	List of country codes to be displayed.
error	boolean	false	Display the error status in the input box.
border	boolean	true	Display borders around the input box.
language	ar en	en	Change country name based on language.
mode	ar all	all	When set to 'ar', prioritizes Arabic countries in the list.
priorityCountries	string[]	[]	List of country codes to display first in the dropdown.
(countryChanged)	EventEmitter	null	Emits an event when the country is changed.
(inputChanged)	EventEmitter	null	Emits an event when the input is changed.

Country Ordering Features

Arabic Countries Mode

The mode input allows you to prioritize Arabic countries in the dropdown list:

1<angular-phone-number 
2  [mode]="'ar'" 
3  [defaultCountry]="'SA'">
4</angular-phone-number>

When mode="ar" is set, all Arabic countries will be displayed at the top of the dropdown list.

Priority Countries

The priorityCountries input allows you to specify which countries should appear first in the dropdown:

1<angular-phone-number 
2  [priorityCountries]="['US', 'CA', 'GB']" 
3  [defaultCountry]="'US'">
4</angular-phone-number>

This will display USA, Canada, and Great Britain at the top of the list, in that exact order.

Combining Ordering Features

You can use both features together:

1<angular-phone-number 
2  [mode]="'ar'" 
3  [priorityCountries]="['EG', 'SA', 'AE']" 
4  [defaultCountry]="'EG'">
5</angular-phone-number>

Note: When both features are used, priorityCountries takes precedence over the mode setting.

Important Notes

• preferredCountries filters the dropdown to only show the specified countries.
• priorityCountries shows the specified countries first, followed by all other countries.

Country List

The component supports a comprehensive list of countries with their respective codes. Here are some examples:

• US: United States
• GB: United Kingdom
• IN: India
• LK: Sri Lanka
• CA: Canada
• AU: Australia

The full list includes over 200 countries and territories with their ISO codes.