Home Angular 8 Solved – intlTelInput is not a function

Solved – intlTelInput is not a function

by therichpost
46 comments
Angular 8 input phone number with country code

Hello to all, welcome to therichpost.com. In this post, I will solved – intlTelInput is not a function.

From last couple of months, I am getting questions from my blog and youtube viewers that, during implement input phone number with country code, they are facing many error like below:

  • window.intlTelInput is not a function
  • intlTelInput is not a function
  • ERROR TypeError: ctx.telInputObject is not a function

Here is the proper tutorial to add input type phone number into your angular 9 application but you need to replace the component.html file with my code and that code I have mentioned in the end:

1. Here is the code, you just need to replace:

<input  type="text" ng2TelInput (hasError)="hasError($event)" (ng2TelOutput)="getNumber($event)" (intlTelInputObject)="telInputObject($event)" 
 (countryChange)="onCountryChange($event)" />





//You need to remove all the functions because first you have to declare them all in component.ts file
----To---- //For using default events you just need to declare functions into your component.ts file as well






<input  type="text" ng2TelInput  />

If you are still facing issue then please comment below.

jassa

Thank you

You may also like

46 comments

Lynn April 24, 2020 - 2:47 am

Hi, Im getting an error as shown as below, Im using angular 8

Refused to apply style from ‘http://localhost:4200/path/to/intlTelInput.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

can u pls help?

Reply
Ajay Malhotra April 24, 2020 - 4:19 am

Hi Lynn, did you follow this tutorial and i think you have not applied styles:
https://therichpost.com/angular-8-input-phone-number-with-country-code/

Reply
Bilgin Kılıç April 29, 2020 - 9:48 am

how to set 90 country code and 05552456800 to number field. I want to initialize this with these values. But how? thank you

Reply
Ajay Malhotra April 29, 2020 - 10:24 am

Hi, you want default 90?

Reply
Bilgin Kılıç April 29, 2020 - 9:16 pm

Imagine when you visit the page you see indian flag is set and number is 05552456800 , how can i set these variables into the object.

Reply
Bilgin Kılıç April 29, 2020 - 9:27 pm

I mean I want to set country code when I initialize the object. 90 is Turkey ‘s country code.

Reply
Ajay Malhotra April 30, 2020 - 5:18 am

Here is the code:
add this attribute inside input

[ng2TelInputOptions]=”{initialCountry: ‘in’}”

Reply
anjali May 9, 2020 - 5:21 pm

how can i change dynamical value for country code

Reply
Ajay Malhotra May 9, 2020 - 5:23 pm

Yes, you can. you need to define that value into your controller file.

Thank you

Reply
Dhairya May 21, 2020 - 11:59 am

How will i get the value concating country code and number

Reply
Ajay Malhotra May 21, 2020 - 12:00 pm

For this, you need to call input onchange event.

Reply
Dhairya May 21, 2020 - 12:02 pm

can i use this with formly angular 7

Reply
Ajay Malhotra May 21, 2020 - 12:04 pm

Yes you can

Reply
Anjali Jibhakate May 22, 2020 - 1:17 pm

Hi, Im getting same error vendor.js:1824 ERROR Error: Uncaught (in promise): TypeError: window.intlTelInput is not a function ..please help

Reply
Ajay Malhotra May 22, 2020 - 2:29 pm

Hi, can you please show me your code?

Reply
Akhil Jain May 28, 2020 - 10:16 am

I have followed your step one by one but getting the same issue.
intltelinput function not found.
type of text/html (Refused to apply style from ‘http://localhost:4200/node_modules/intl-tel-input/build/css/intlTelInput.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.)
ERROR TypeError: window.intlTelInput is not a function
plz help

Reply
Akhil Jain May 28, 2020 - 2:42 pm

yes, sir.
I have followed the same step given in this URL.In my angular 5 version projects.

Reply
Ajay Malhotra May 28, 2020 - 3:02 pm

Your are doing in angular 5? very old, right now angular 9 is running.

Reply
Akhil Jain May 28, 2020 - 5:45 pm

but my project on angular 5.Plz suggest

Reply
Ajay Malhotra May 28, 2020 - 5:51 pm

Angular 5 is older version, please do project in Angular 9.

Reply
Akhil Jain May 28, 2020 - 5:57 pm

that is not my project it is my client (office) project which is running on angular 5 so that I am getting an issue and I didn’t find other packages dependency.

Reply
Ajay Malhotra May 29, 2020 - 4:36 am

Yes you are right then you can use some other jquery library for input with country selection.

Reply
Akhil Jain May 29, 2020 - 9:24 am

thanks .. now it’s working on my same project but how validate the number country wise.
and save that data with fromControlName.

Reply
Dhairya June 9, 2020 - 8:26 am

How to use with ngx formly angular can u give solution

Reply
Ajay Malhotra June 9, 2020 - 2:03 pm

I will update you on this.

Reply
sirinu June 15, 2020 - 10:36 am

Hi, I am using angular 8 version but get some error.

window.intlTelInput is not a function

Reply
Ajay Malhotra June 15, 2020 - 3:55 pm

Did you follow my complete tutorial?

Reply
sirinu June 15, 2020 - 10:37 am

in local its working fine, after the move to live its coming error.

Reply
Hashan94 October 5, 2020 - 5:53 am

it works. Thanks a lot!!!!

Reply
Ajay Malhotra October 5, 2020 - 6:35 am

Great 🙂

Reply
Maheswari October 19, 2020 - 11:47 am

Hi is there any option for search country field

Reply
madhavi October 19, 2020 - 1:03 pm

Hi, i need same functionality in angular 9 using ag-grid. Is it possible

Reply
Ajay Malhotra October 21, 2020 - 5:24 am

Yes

Reply
Mounica Chandra October 21, 2020 - 4:59 am

Hi, I am setting the number for inttelinputobject, here countrycode with flag is coming but I am not getting phonenumber in input field

Reply
Maheswari October 26, 2020 - 6:14 am

Hi Thank you for the reply can you please provide the code(property for searching the country using intltelinput) so that i can implement it in my application

Reply
Mounica Chandra October 21, 2020 - 5:20 am

How do I seperate a country code from phonenumber?

Reply
Ajay Malhotra October 21, 2020 - 5:24 am

Can you explain it bit more?

Reply
Mounica Chandra October 21, 2020 - 6:15 am

I am having a input field of type tel it contains both country code with flag and phonenumber field, so while I am saving the number I am sending both countrycode and phonenumber in one string, while I am editing the page I am getting phonenumber as both countrycode and phonenumber.
so I need to set the number what I get, while setting the number by using setNumber() only country code is setting, phone number is not setting

Reply
Ajay Malhotra October 21, 2020 - 6:18 am

Okay, I will check and update you. Thanks

Reply
amalmohann February 4, 2021 - 4:15 am

Add utils.js in scripts,

`”scripts”: [
“node_modules/intl-tel-input/build/js/utils.js”
]`

in angular.json file. This will solve your issue.

1. goto angular.json file
2. look for scripts
3. add “node_modules/intl-tel-input/build/js/utils.js” inside the scripts along with the intlTelInput.min.js / intlTelInput.js
4. save
5. refresh your application

Reply
Ajay Malhotra February 4, 2021 - 4:27 am

Great.

Reply
Maddela Sandeep April 28, 2021 - 12:34 pm

its works only locally but when we try to build in server and load it it will how same error

Reply
Ajay Malhotra April 28, 2021 - 12:36 pm

You must have some undefined function.

Reply
Supradha February 10, 2023 - 6:52 am

Hey,Ng2-tel-Input in not working with angular 12

Reply
therichpost February 10, 2023 - 12:55 pm

Can you please tell me your error in console?

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.