select-phone

country-picker

A plugin 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.

This is a template for building your own reusable Angular6 module using TypeScript.

Browser Compatibility

Chrome	FF	Safari	IE	Chrome Android	Mobile Safari	IE Mob

    ✓ |   ✓ |     ✓ | 11 |                   ✓ |              ✓ |       ✓ | 

Installation

If you'd like to test this package,install it with npm run npm i select-phone

Usage

app.module.ts

// Import 
import {SelectPhoneModule} from 'select-phone';

@NgModule({
  imports: [
      BrowserModule,
      SelectPhoneModule // put module in imports
    ],
})

home.html

   <lib-select-phone></lib-select-phone>

Update angular-cli.json file for older Angular project(2,4,5) and angular.json for Angular6

{ "glob": "**/*", "input": "../projects/select-phone/assets/flags", "output": "./assets/" }

// add above line into assets Array in your file, for example

"assets": [
              "src/favicon.ico",
              "src/assets",
              { "glob": "**/*", "input": "node_modules/select-phone/assets/", "output": "./assets/" } //put here
            ]
            

// if it doesn't work then just stop running your project and run again.

Usage For Ionic App

Step 1 - Install the plugin

Step 2 - Import module in the app.module.ts file.

app.module.ts

// Import 
import {SelectPhoneModule} from 'select-phone';

@NgModule({
  imports: [
      BrowserModule,
      SelectPhoneModule // put module in imports
    ],
})

Step 3 - Include it in any component using below component code

home.html

   <lib-select-phone></lib-select-phone>

Step 4 - Create folder named [config] and create file named[copy.config.js] inside the [config] folder

Step 5- Copy and paste below code into that file

copy.config.js

module.exports = {
  copyAssets: {
    src: ['{{ROOT}}/node_modules/select-phone/assets/**/*'],
    dest: '{{WWW}}/assets/'
  }
}

Step 6 - Update [package.json] file to include [copy.config.js] file.

package.json

   "config": {
       "ionic_copy":"./config/copy.config.js"
     }

** Step 7 - Restart your project using ionic serve or rebuild your project.**