Skip to main content

Ionic 2 Beginner : Dial A Number In Ionic 2 Apps

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

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.

 

FOR USSD CODE:

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
Donate
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. :-)

  • aks

    is it possible to know somehow that when dialer pad gets open (using window.location) then whether user actully dialed no. or clicked on cancel button?? plz help n thanks 🙂

  • Pingback: How To Make A Phone Call With Ionic Apps - pointDeveloper.com()

  • Anuranjan Srivastav

    Hi,

    I tried with ionic 2 but that does not work and instead gives error as below

    Expression prefix tel did not match a template transformer to interpret the expression.

    • hey there I just checked it again on a new project and it is working..the code is fine…The exception might be caused by something else. Do re-check and let me know.

  • Expressuals

    Hi, /
    My app calls normal numbers; but it is unable to dial USSDS; i.e *556#. how can I get it to work? Thank you

    • instead of using the uriencode function you can just use the string value for example for *556# use *556%23 that should work

      • Expressuals

        I have actually also tried that, but nothing happens.

        • Expressuals

          Dial4
          Dial5
          Dial6
          I have tried all of these options, only the last one (the one without the * and the #) has worked so far

          • the href attribute of the anchor tag only accepts string so you need to have
            “tel:*556%23” (with quotes)
            in place of
            tel:*556%23 (without quotes)

            can you put up your code on stackoverflow and send me a link. I would be happy to take a look. But before you do that download the code attached to the post and run it.

            -Regards

          • Expressuals

            Hi, I had omitted the quotes in the comment above; but in my code I have them. Here’s a link to the question on stackoverflow: http://stackoverflow.com/questions/41122535/how-to-dial-ussd-with-ionic-framework. Thanks for trying to help me out. I really appreciate it 🙂

          • Expressuals

            Quick Update! I have been testing only on an Iphone so far. I just ran a test on the Android and found out that (a-tag href:”tel:123″), didn’t work at all. So I used the cordovaPhoneCall plugin; and all works perfectly on android (calls + USSD). However the problem still persists on the Iphone …

  • Aisy Atisyah

    Hi!

    I have tried your code, when i replace the “tel: number ” with my number, it is returning to 835 in front of my number. it is by default or what?

    • No, nothing is prefixed by default. Make sure you have href=”tel:+123-456-789″ . The 835 that you are getting is because you have “tel”, which is being translated into number.

      So I assume that you do not have “:” between tel and number.
      I would be happy to take a look at your code if you still have issues.

      Regards,
      -Prantik

%d bloggers like this: