Home Angular 8 Angular 8 input phone number with country code

Angular 8 input phone number with country code

by therichpost
Published: Last Updated on 69 comments
Angular 8 input phone number with country code

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 input phone number with country code.

Guy’s this post code snippet will also work in angular latest version Angular 12 input type phone number with country code and country flags.

Angular 8 input phone number with country code
Angular 8 input phone number with country code
Angular Input with Country Code Working Video

Guys click here to see the updated version of this post for Angular 11+ versions.

Post Working:

In this post, I am showing input field with enter phone number with country code and country flags.

Here is the working coding steps and please follow carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. Here is the below command you need to run into your terminal to add intl tel input into your angular 8 application:

npm install ng2-tel-input intl-tel-input --save

3. Now you need to add below code into your angular.json file:

...
"styles": ["node_modules/intl-tel-input/build/css/intlTelInput.css"],
"scripts": ["node_modules/intl-tel-input/build/js/intlTelInput.min.js"]
...

4. Now you need to add below code into your src/app/app.module.ts file:

...
import {Ng2TelInputModule} from 'ng2-tel-input';
...

imports: [...  Ng2TelInputModule ...]

5. Now you need to add below code into your src/app/app.component.html file:

<input type="text" ng2TelInput />

This is it guy’s and if you will have any kind of query related to this post then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

Jassa

Thank you

You may also like

69 comments

Adnan Ahmed March 11, 2020 - 10:55 am

Hi , I the code you provided above is working properly, if you have src/app/app.component.ts code sp, please share with me.

Reply
Ajay Malhotra March 11, 2020 - 4:31 pm

Hello and why you need app.component.ts file?

Reply
Dinesh May 26, 2021 - 2:03 pm

Works well, thanks.

Reply
Ajay Malhotra May 27, 2021 - 5:36 am

You are welcome.

Reply
S. VISHNU SHANKAR July 1, 2021 - 5:20 pm

hi bro, can you please tell me how to change the prefered country ?

Reply
nandan March 18, 2020 - 6:37 am

Do we need to define some code on app.component.ts too you should also mention that code in order to make it complete

Reply
Ajay Malhotra March 18, 2020 - 7:30 am

No need but if you want to save or send the info then.

Reply
Nemanja April 6, 2020 - 8:50 am

Code just doesnt work.

Reply
Ajay Malhotra April 6, 2020 - 10:43 am

Did you follow proper tut?

Reply
Bright Agbosu July 8, 2020 - 1:47 pm

I followed the code tutorial and it worked.

Reply
Ajay Malhotra July 8, 2020 - 6:03 pm

Great

Reply
Anas April 10, 2020 - 1:41 pm

window.intlTelInput is not a function
at Ng2TelInput.push

Not Working .

Reply
Ajay Malhotra April 10, 2020 - 3:49 pm

I will check and update.

Reply
TheI April 16, 2020 - 1:10 pm

I tried with that ionic framework / Angular. Its not working. Any Idea dude?

Reply
Ajay Malhotra April 16, 2020 - 3:51 pm

Hi, but for me its working and you can check the video on youtube also.

Reply
Alauddin Jahin April 20, 2020 - 11:38 am

Hello,
I have been trying to do it as well but I am getting error in my angular 9 project and also I have checked npm packages all documentation . After all I am getting same error . Error : this .telInput is undefine. some times it show like this . telInput in not a function . Tell me the solution What will I do for solving this problem. Why I am facing this type of error.

and I have seen your toast posted too and after doing all I am not getting the toast design but it’s working. What should I do to solve it?

Reply
Ajay Malhotra April 21, 2020 - 11:04 am

I will update you.

Reply
Shraddha April 25, 2020 - 8:55 pm

Can u share link of video that validation handled for this code

Reply
Shraddha April 25, 2020 - 8:52 pm

I want to add validation error messages for above code

Reply
Ajay Malhotra April 26, 2020 - 4:52 am

Yes and I will share the code.
Thank you

Reply
Akhil Jain May 30, 2020 - 9:17 am

how to update this country code in my form value.

Reply
Ajay Malhotra May 30, 2020 - 5:48 pm

Here is the code:
add this attribute inside input
[ng2TelInputOptions]=”{initialCountry: ‘in’}”

Reply
Akhil Jain June 5, 2020 - 6:02 am

this is the initial set but when I update or add like I choose the “butan” country and save it then I checked or update the “butan” will not be saved.so how to save the country flag in the form.

Reply
Ajay Malhotra June 5, 2020 - 6:06 am

For that, you need to just country code with number with form posting.

Reply
Akhil Jain June 5, 2020 - 3:09 pm

can u provide me the code how to do that?

Reply
Ajay Malhotra June 5, 2020 - 3:11 pm

I will update you on this.

Dhairya June 11, 2020 - 7:40 am

How to get both country code values and mobile number and validate
also how to how country code dropdown in edit mode when user choose number according to country

Reply
Shiva June 11, 2020 - 2:49 pm

Hi Ajay, when i make the then its giving me below error-

ERROR DOMException: Failed to execute ‘setSelectionRange’ on ‘HTMLInputElement’: The input element’s type (‘number’) does not support selection.

and cant able to store the data in backed because of this error, can you help me how to resolve this problem?
i want to accept the mobile number type as a number not a text?(in tutorial you make input type=”text”)
can you help me with this?

Reply
Shiva June 11, 2020 - 2:51 pm

typo mistake ,correction** –>

when i make–> input type = “number” then getting above error

Reply
Ajay Malhotra June 11, 2020 - 3:03 pm

You can use default (countryChange)=”onCountryChange($event)” option.

Thanks

Reply
Bright Agbosu July 7, 2020 - 11:47 am

Hello, thanks for the code you shared.
I want to control the size but I am unable to.
Also, how do I set another country as default?

Reply
Ajay Malhotra July 7, 2020 - 11:54 am

Here is the code:
add this attribute inside input
[ng2TelInputOptions]=”{initialCountry: ‘in’}”

Reply
Bright Agbosu July 7, 2020 - 12:35 pm

Please the code did not work.

Reply
Ajay Malhotra July 7, 2020 - 6:15 pm

Send me your code on my email: therichposts@gmail.com

Reply
Bright Agbosu July 8, 2020 - 8:30 pm

The quote mark used is what caused the error so I changed to this:
[ng2TelInputOptions]=”{initialCountry: ‘us’}”

Reply
RN Raagul July 21, 2020 - 2:27 pm

hello, This is working perfectly. but the background is transparent. and other buttons are shown above the drop-down list. is there any way to customize it?

Thanks

Reply
Ajay Malhotra July 21, 2020 - 5:12 pm

Thank you and yes, you can customize it with css.

Reply
Nick July 23, 2020 - 11:01 am

any idea if this will work without bootstrap ?
because i tried to implement it in my project and its just an empty input

Reply
Ajay Malhotra July 23, 2020 - 11:03 am

Yes, why not!!

Reply
jasmine July 25, 2020 - 8:19 am

hello can you help me to fnid the way that make me connect the APi fonction with angular

Reply
Ajay Malhotra July 26, 2020 - 2:37 am

Yes, you can do that with HTTP Client services.

Reply
Junaid August 9, 2020 - 11:32 am

How to bind the extension along with the phone number, and then send it to a post request? Only the typed in number is send. But I need to send the number along with the extension

Reply
Ajay Malhotra August 9, 2020 - 11:39 am

Extension means country code?

Reply
karthik August 14, 2020 - 7:04 pm

Hai,
please help me one this , how can i get separate country flag and separate county code .

Reply
Aman Singh August 27, 2020 - 6:11 pm

This is great Ajay, you saved my day. The code works perfectly fine. But there is use case when you are getting the country code from server and setting that using event.setCountry(this.countryID);
It doesn’t work. Becuase it populate the select boxes before getting the data from API. What do you suggest for that.

Reply
Ajay Malhotra August 28, 2020 - 4:07 am

Hi Aman and thank you for you comment and I will update you soon.
Thanks 🙂

Reply
JIL SHAH September 17, 2020 - 6:57 am

how can set my output like +91 1234567890…country code with phoneno. please reply

Reply
Ajay Malhotra September 17, 2020 - 7:03 am

you want to set this default value inside input box?

Reply
Hashan94 October 5, 2020 - 5:53 pm

how can I append the country code with the telephone number. I’m working on aa angular reactive form. I want to pass the entire value on submit.
ex:
when I select Sri lankan flag from the dropdown it doesn’t append to the phone number

Reply
Roberto Ribeiro Vieira December 1, 2020 - 1:02 am

Thanks for this code.. How can I get the country code to save in DB? and associate to the correct flag when show the number?

Reply
Ajay Malhotra December 3, 2020 - 4:08 am

I will update you on this.

Reply
AYOUB TASNAOUI May 26, 2021 - 9:38 am

hey thank you for your help it is working,
i want to know how can excludes some countries or add countries

Reply
Ajay Malhotra May 26, 2021 - 9:41 am

Try this:
add this attribute inside input
[ng2TelInputOptions]=”{initialCountry: ‘in’}”

Reply
Ravikiran July 24, 2021 - 4:27 am

it is worked for me.
Thank you boss

Reply
Ajay Malhotra July 24, 2021 - 5:52 am

You are welcome.

Reply
Naveen October 22, 2021 - 3:14 pm

Hi, I am getting ERROR TypeError: window.intlTelInput is not a function, How to Fix this error.

Reply
arul February 2, 2022 - 4:09 pm

how can i implement this library in angular material input

Reply
Ajay Malhotra February 3, 2022 - 10:43 am

Good query and I will update you soon.
Thanks.

Reply
Liga July 27, 2022 - 2:10 pm

How can I get the dial code + phone number on submit?

Reply
kavi March 30, 2023 - 6:11 am

hi

Reply
therichpost April 23, 2023 - 2:30 pm

Hello

Reply

Leave a Comment

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