Up next in 10
Angular ngx-intl-tel-input Example to Build International Phone Number Form Input With Flag in TS
3 views
Jun 13, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:02
uh hello guys uh welcome to this video
0:04
So in this video I will show you a
0:06
angular uh module which allows you to
0:09
build international phone number form
0:12
input So if you want to receive a phone
0:14
number inside your application with the
0:19
country codes also enabled So we have a
0:23
actual package available So this
0:25
actually is the demo here So when you
0:28
receive these phone number here you will
0:31
actually see this
0:34
it will appear like this The flag will
0:37
also be there of countries in the
0:39
drop-down So here you will allow user to
0:42
select their phone number So it appears
0:45
something like this This is the flag
0:47
here Automatically it has all the
0:50
countries here alongside with their
0:52
country respective country codes So as
0:54
the user comes to your application they
0:56
can select their respective country and
0:58
then that then they can enter the phone
1:01
number So this is the actual package and
1:06
to install this you need to go to
1:08
npmjs.com just search for this package
1:10
ngx
1:13
in nt
1:17
and I
1:22
this is the package here and the command
1:26
is very simple uh you simply execute
1:28
this command to install this package And
1:31
it's almost got 24,000 weekly downloads
1:35
So it has a great documentation as well
1:38
And now to just implement this it's very
1:40
easy You let me start this from scratch
1:43
So the very first step is that you need
1:45
to go to this file app.module.ts
1:48
file of your angular project And here
1:51
you simply import this line import
1:57
ngx international telephone input module
1:59
It will be coming from this package ngx
2:02
international telephone input And then
2:05
you go to the imports array Simply add
2:07
this module that you imported And for
2:10
this you also need the built-in forms
2:12
module as well of angular So we already
2:14
imported the forms module as well as you
2:17
can see from add the rate angular/forms
2:20
and same you import this and then add
2:22
this to the imports array So that's all
2:24
that we need to do right in this file So
2:26
close this file and then go to this app
2:28
do.component component HTML file of your
2:31
project and right here you have this
2:33
component here which is ngx in nl
2:37
telephone input opening and closing tag
2:43
So right here you will see by default it
2:45
will show all the all these countries
2:48
and this is the form input field where
2:50
the user can enter their respective
2:52
phone number and then it also has some
2:55
options right here in this component If
2:57
you al only want to show specific
3:00
countries then there is an option for
3:02
that
3:04
preferred
3:07
countries This is the option it supports
3:09
here and here you can add the code of
3:14
this country country here So
3:17
SC cg stands for Singapore So it is only
3:20
showing the preferred country by default
3:23
it is showing Singapore So here you can
3:25
pass multiple countries as well Just put
3:28
a comma and just type US So now there
3:30
will be two countries which will be
3:32
preferred by default And then there is
3:37
if you only want to restrict a specific
3:40
number of countries There is a option
3:43
here which you can pass only countries
3:46
So this makes sure that it only shows a
3:48
specific number of countries So now we
3:50
have showing here MI and US So now what
3:54
happens if you remove this It only shows
3:58
these two countries which is Malaysia
4:00
and United States So here you just need
4:02
to pass the twoletter digit country code
4:04
and here you can restrict
4:09
We have two options preferred countries
4:11
and only countries
4:17
And then we have two more options If you
4:19
also want to select automatically the
4:21
country we have these boolean parameters
4:24
Enable auto country select to true
4:27
Enable placeholder to true So if you
4:29
refresh this
4:33
it will automatically detect your
4:35
location and then it will
4:38
select you will see this is the actual
4:41
module where it's very easy to implement
4:43
Just install it and uh start using it
4:46
inside your angular application
4:49
International telephone form input
4:51
component for it also shows the flag as
4:54
well as you can see and also check out
4:58
my website freemediatools.com which
5:00
contains unlimited number of tools
5:02
regarding audio video and image and I
5:05
will be seeing you in the next live
5:07
stream
#Computer Education
#Programming