International Telephone Input

An Angular package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.

Documentation

https://webcat12345.github.io/ngx-intl-tel-input/overview.html

Pull requests are welcome!!!

Merged pull requests

webcat12345#3

Installation

To install this library, run:

$ npm install ngx-intl-tel-input --save

This library depends on BsDropdownModule from ngx-bootstrap/dropdown. To install this library, run:

$ npm install ngx-bootstrap --save

Then import BsDropdownModule at AppModule. (more details see : http://valor-software.com/ngx-bootstrap/#/dropdowns)

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  ...
  imports: [
      ...
    BsDropdownModule.forRoot()
      ...
  ],
  ...
})
export class AppModule { }

Consuming library

Injecting StyleSheet

Inside angular-cli.json

 "styles": [
       
        "../node_modules/ngx-intl-tel-input/resource/intl-tel-input.css"
      ],

From your Angular AppModule:

// Import your library
import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';

@NgModule({
  ...
  imports: [
      ...
    NgxIntlTelInputModule
      ...
  ],
  ...
})
export class AppModule { }

Once library is imported, you can use components in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{phone_number}}
</h1>
<ngx-intl-tel-input [(value)]="phone_number"></ngx-intl-tel-input>

Parameters

Input	Description
value	Phone number
preferredCountries	webcat12345#3

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

helgetan/ngx-intl-tel-input