Ngx-lib-phone-input NPM

ngx-lib-phone-input

This library was generated with Angular CLI version 17.3.0. NgxPhoneNumberInput is an Angular library for easy integration of phone number input fields in your Angular applications.

Live Demo

See a live example of NgxPhoneNumberInput in action on Stackblitz: DEMO

Installation

To install NgxPhoneNumberInput in your Angular project, you can use npm:

$ npm install ngx-lib-phone-input

Dependencies

This library requires the following additional dependencies:

country-list-json
primeng

You can install them using npm:

$ npm install country-list-json
$ npm install primeng

Style.css

The library includes styles based on PrimeNG's md-light-indigo theme. You can import it in your styles.css file:

@import 'primeng/resources/themes/md-light-indigo/theme.css';

Usage

Import

Import the NgxPhoneNumberInputModule into your Angular module:

import { NgxPhoneNumberInputModule } from "ngx-lib-phone-input";

@NgModule({
  imports: [
    // ... other imports
    NgxPhoneNumberInputModule
  ],
  // ...
})
export class AppModule { }

In your component template, use the ngx-lib-phone-input component within a reactive form:
```
<ngx-lib-phone-input formControlName="phone"></ngx-lib-phone-input>
```

Example

TypeScript

  constructor(){ }
number:any
  MyForm = new FormGroup({
    phoneNumber : new FormControl('')
  })

  submit(){
    this.number =this.MyForm.value.phoneNumber || "";
  }

HTML

<form [formGroup]="MyForm" (submit)="submit()">
  <ngx-lib-phone-input  formControlName="phoneNumber"></ngx-lib-phone-input>
  <button >Get Number</button>
</form>