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

mahmoudismail · December 5, 2016, 2:03pm

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

mahmoudismail · December 6, 2016, 1:29pm

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

tamil_hakunamatata · February 21, 2017, 11:36am

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

mahmoudismail · February 24, 2017, 6:48am

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

Sherif_Mballo · May 26, 2017, 10:15pm

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

FrancoisIonic · May 26, 2017, 11:47pm

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

michaelo · June 9, 2017, 2:46pm

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.

pjfcabraldev · September 29, 2017, 2:14pm

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

pjfcabraldev · September 29, 2017, 2:40pm

I have de error:

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

wthijmen · September 29, 2017, 2:48pm

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

pjfcabraldev · September 29, 2017, 3:03pm

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();
  }

}

michaelo · October 5, 2017, 9:32am

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

virendrashakya · September 17, 2018, 5:53am

This library worked for me

guntercn · October 23, 2018, 4:50am

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!!

rana381 · August 26, 2019, 5:25pm

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

Ahmed-Atab-DEV · March 30, 2020, 3:20pm

@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:

Run npm i intl-tel-input.
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.)
Include the following in the “index.html”:

  <!-- importing css for intlTelInput js plugin -->
  <link rel="stylesheet" href="assets/build/css/intlTelInput.css">

Include this in the imports of the component or page were you want to use this plugin:
import * as intlTelInput from 'intl-tel-input';
In this class of this component or page declare the following variables:

 public inumber: any;
    iti: any;

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'
    });
  }

Include this in the component’s or page’s HTML file:

<h1>International Telephone Input</h1>
<input type="tel" id="phone">

That’s it!

azzamasghar · June 16, 2021, 9:38pm

If anyone is coming late here during ionic 4 and 5 you can use the following package that i wrote recently for one of my projects. It has detailed instructions on how to use.

Topic		Replies	Views
How to create IONIC input with intl-tel-input in IONIC 3 ionic-v3	2	4295	June 16, 2021
How to create IONIC component for intl-tel-input in IONIC 3 Ionic Native	0	523	February 21, 2019
International phone numbers - Modul for ionic v3/4 ionic-v3	4	4448	July 19, 2021
Right way to Reuse/Integrate Angular 4 Component (that uses jQuery plugin) into IONIC project ionic-v3	4	1395	July 26, 2017
Using an existing js library (jQuery) in ionic 2 ionic-v3	6	7946	May 15, 2016

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

Related topics