Angular-phone-number NPM

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:

npm i angular-phone-number

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

Install the required dependencies:

npm i libphonenumber-js -D

Flag Assets Setup

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

Copy the flag assets from the package to your project:

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

Ensure your Angular project is configured to include the assets folder in your angular.json file:
```
"assets": [
  "src/favicon.ico",
  "src/assets"
],
```

Usage

Import the AngularPhoneNumber module into your module file:

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

Add AngularPhoneNumber to your module imports:

@NgModule({
  imports: [AngularPhoneNumber]
})
export 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:

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="myForm">
      <angular-phone-number
        formControlName="phoneNumber"
        [defaultCountry]="'LK'"
        [preferredCountries]="['LK', 'IN', 'GB']"
        [error]="myForm.get('phoneNumber')?.touched && myForm.get('phoneNumber')?.invalid"
        (countryChanged)="onCountryChanged($event)"
        (inputChanged)="onInputChanged($event)"
      ></angular-phone-number>
    </form>
  `,
  styles: []
})
export class AppComponent {
  myForm: FormGroup = new FormGroup({
    phoneNumber: new FormControl(''),
  });
  
  onCountryChanged(event: any) {
    console.log('Country changed:', event);
  }

  onInputChanged(event: any) {
    console.log('Input changed:', event);
  }
}

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.
`(countryChanged)`	`EventEmitter`	`null`	Emits an event when the country is changed.
`(inputChanged)`	`EventEmitter`	`null`	Emits an event when the input is changed.