0.0.10 • Published 6 years ago

country-picker v0.0.10

Weekly downloads
37
License
-
Repository
github
Last release
6 years ago

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 Angular4/Ionic3 module using TypeScript.

screen shot 2018-05-24 at 11 22 24 am

screen shot 2018-05-24 at 11 19 42 am

Browser Compatibility

ChromeFFSafariIEChrome AndroidMobile SafariIE Mob
      ✓    ✓11             ✓          ✓    ✓

Installation

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

Develop your module like any other ionic 3 & Angular module. Then, run npm run build to build a local copy.

Features

  • Automatically select the user's current country using an IP lookup
  • Automatically set the input placeholder to an example number for the selected country
  • Navigate the country dropdown by typing a country's name, or using up/down keys
  • Handle phone number extensions
  • Full validation, including specific error types
  • Retina flag icons

Usage

app.module.ts

// Import 
import { CountryServiceProvider ,ComponentsModule } from 'country-picker';
import {HttpClientModule} from "@angular/common/http";


@NgModule({
  imports: [
    ...
    
    HttpClientModule, // Put Http module here
    ComponentsModule
  ],
   
  providers: [
    ...
    
    CountryServiceProvider
  ]
})

home.html

  <select-country (onSelectNumber)="getNumber($event)"  (onSelectCountry)="getCountry($event)"></select-country>

Public Methods

Get Selected Country

<select-country (onSelectCountry)="getCountry($event)"></select-country>
  getCountry(selectedCountryObject: any){
    console.log(selectedCountryObject)
  }

Get Entered Number

<select-country (onSelectNumber)="getNumber($event)"></select-country>
  getNumber(enteredNumberObject: any){
    console.log(enteredNumberObject.mobile)
  }

Check Number isValid

<select-country (onSelectNumber)="getNumber($event)"></select-country>
  getNumber(enteredNumberObject: any){
    console.log(enteredNumberObject.isValid)
    // isValid is return in boolean form as true | false
  }

Options

Hide Placeholder Number

  • Type: Boolean Default: true

  • To hide the country example number as placeholder pass the Boolean value 'false' as isPlaceholder="false".

<select-country [isPlaceholder]="false"></select-country>

Hide user's country

  • Type: Boolean Default: true

  • this plugin is use IP address for lookup to set the default country to the user's country. For to disable geoIpLookup mode pass the Boolean value 'false' as isGeoIpLookup="false".

<select-country [isGeoIpLookup]="false"></select-country>

License

MIT © Canopas