Skip to main content

Ionic 2 Beginner : Dial A Number In Ionic 2 Apps

In this tutorial I will show you how to dial a number in Ionic 2 apps.We will be using the black Template of Ionic 2. We will create a button which when tapped will dial a number. No plugins are necessary for this to work.

I already have a Tutorial on How To Make A Phone Call With Ionic Apps which is for Ionic 1.x apps. But as Ionic has now evolved to a new version namely Ionic 2 we need to do things differently which we will see in here.

Step 1)

We will start off by creating out project with the blank template, so open up your command prompt and run the following commands

Now let’s add Android and iOS platforms to our project.


Step 2)

Now we need to do to prepare buttons pressing which we will dial a number. We will create a few buttons with different variety of numbers as shown below. We will do that in our app\pages\home\home.html as follows

Note that we are dialing numbers in two ways one using href but for that to work we can no longer use the button tag. If we want to use the button tag we have to use a function which is shown in line 17


Step 3)

This step is only useful if you are using function to dial the number as shown in line 17 of the previous step. So now we will need to create the function in our src\app\pages\home\home.ts file and add the following functionality to it

Here before the call is made on line 15 using the callIT() function you can add anything you want before it depending on your app. For example, you can add a counter that counts how many times this number has been called, you can validate the number before making the call, you can also add area codes before calling and the list goes on and on.

Step 4)

Access to tel:* is already present in the config.xml file for Ionic 2. If not you can allow access in the config.xml file by adding the following

And that's it. Now you can dial numbers using your ionic app.



USSD code has # in it, when you use the normal way as shown above the # is removed. So to have USSD codes you need to encode the #, meaning replace every occurrence of # with %23. As a result, the above example can be used with USSD code as follows

Alternatively, if you are using a function to make the call as shown in the above example we are using the callIT() function you can do the following. First, we will have to make some changes to the html tag as follows

In the javascript part now code the callIT() function as follows

As you can see we are using the encodeURIComponent() function. This will automatically convert the # to %23. Note that if try to cover the whole string tel:+123#456-789 this will not work, so we are concatenating 'tel:' with passed number.


Note: A thing to note here is that if you are using a hybrid app to make a call using your app when u click the dial button the number will appear 'Typed in' the dial pad the user still has to tap the call button in the phone's dialer.


Download Code:

Code Will Be Sent Via Email


Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)