How i can use intl-tel-input jQuery library within ionic

How i can use this jQuery library https://github.com/jackocnr/intl-tel-input within ionic 2.

i’ve used third party library named intl-tel-input.

1- First install jQuery

npm install --save jquery

Now, within any of the app files import jquery like

import $ from "jquery"; 

and it will using like

$('#elemId').width();

2- install intl-tel-input library

npm install intl-tel-input --save

Now, within any of the app files import int-tel-input like

import 'intl-tel-input';

and using like below:

ngOnInit(): any {
    let telInput = $("#elemtId");
    let output = $("#output");

    telInput.intlTelInput();
    // listen to "keyup", but also "change" to update when the user selects a country
    telInput.on("keyup change", function() {
      var intlNumber = telInput.intlTelInput("getNumber");
      if (intlNumber) {
        output.text("International: " + intlNumber);
      } else {
        output.text("Please enter a number below");
      }
    });
  }

home.html

<p id="output">Please enter a number below</p>
<input id="elemtId" type="tel">

ionic info

Your system information:

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 7.3 Build version 7D175

Hi Mahmoudismail, Thanks for sharing this. But how do you add the css for ‘intl-tel-input’ in your project?

you can put your one css by overriding it using inspect element of the browser. enjoy :slight_smile:

Hi mahmoudismail,

thanks a lot for sharing this integration with ionic 2. I am new on ionic 2 please into which file do I have to add the code you provided (ngOnInit() …) ?

Do I have to implement it into my home.ts file ?
as well what about the css part? where are located the flags picture ?

thanks for your help.

kind regards,


Sherif

This is Ionic 1 code, so of course all the code and structure differs with Ionic 2/3.

No it isn’t, nor is the code above ionic specific.

About the css, right now i’m having to copy them from the node_modules dir into my ‘theme’ dir and import them as you would do any other sass file.

Help me! How i can use this s ionic 3 ?

I have de error:

telInput.initTelInout() is not a function
i import in my ts file :
import $ from “jquery”;
import ‘intl-tel-input’;

Maybe you can provide your .ts file so other people can watch your code to check on faults.

import { Component} from '@angular/core';
import { NavController, NavParams, ModalController } from 'ionic-angular';
import { LoginSocialPage } from '../login-social/login-social';
import $ from "jquery";
import 'intl-tel-input';
/**
 * Generated class for the LoginPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) {
    let telInput = $("#phone");
    //let output = $("#output");

    telInput.initTelInout();
    telInput.on("keyup change"),function(){
      alert("teste");
    };
    
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  
  public social(){
      let modal = this.modalCtrl.create(LoginSocialPage);
      modal.present();
  }

}

You have a typo in your code above.
telInput.initTelInout(); -> telInput.initTelInput();

This library worked for me :slight_smile:

ionic 2 y 3.

steps:
1-install: npm i intl-tel-input
2-copy files:

// copy the file
// intltel/utils.js in /assets/js/
// flags.png and/or flags@2x.png in /assets/img/
// import css in your css file o individual css file

3-Import:

YOUR-TS:

import * as intlTelInput from ‘intl-tel-input’;

public inumber: any;
iti: any;

ionViewWillEnter() {
   // get text input
   this.inumber = document.getElementById('mobile_number');
    var countryCode = 'us';

this.iti = intlTelInput(this.inumber,{
initialCountry: countryCode,
preferredCountries: [countryCode, ‘us’],
geoIpLookup: countryCode,
utilsScript: “…/assets/js/intltel/utils.js”
});

}

4-result
// I customized the js to get the following results
https://drive.google.com/open?id=17CmkGuyCz-uJuszRQIrdUuBQidtWGEiG
https://drive.google.com/open?id=14bVI5muau_Adwh9fBekHGQ0m86W0a-AD
https://drive.google.com/open?id=1SFg5-2elIgLsReAO-Vb_AuacR4CjV4w6
https://drive.google.com/open?id=1IXRJZbRVvoHYEpDBi1ywjOVMO1vMSMHT

Have good luck!!

i am also having the error
TypeError: telInput.intlTelInput is not a function
please help me out

@guntercn

This had helped me but not worked properly.
I will update your comments to show what I had done in order to get it work properly.

To fix this issue follow these steps:

  1. Run npm i intl-tel-input.

  2. Download the “build” folder from: “https://github.com/jackocnr/intl-tel-input” to your project’s assets folder. (You can keep in the js folder that is placed in the build folder the “utils.js” file only and delete the rest.)

  3. Include the following in the “index.html”:

  <!-- importing css for intlTelInput js plugin -->
  <link rel="stylesheet" href="assets/build/css/intlTelInput.css">
  1. Include this in the imports of the component or page were you want to use this plugin:
    import * as intlTelInput from 'intl-tel-input';

  2. In this class of this component or page declare the following variables:

 public inumber: any;
    iti: any;
  1. Include the following code in the ionViewWillEnter():
ionViewWillEnter() {
    // Get text input.
    this.inumber = document.getElementById('phone');

    var countryCode = 'us';

    this.iti = intlTelInput(this.inumber, {
      initialCountry: countryCode,
      preferredCountries: [countryCode],
      geoIpLookup: countryCode,
      utilsScript: '../../assets/build/js/utils.js'
    });
  }
  1. Include this in the component’s or page’s HTML file:
<h1>International Telephone Input</h1>
<input type="tel" id="phone">

That’s it!

1 Like