Make a phone call from Ionic app NOT using href=tel

ionic-v1
1

I have a list of items, when a user clicks on a specific item I want to open the phone so he can make a phone call to a specific number, however before that I want to send a notification to my server to indicate that the user clicked on the item.
This is how my html looks like:

<ion-list dir="rtl">
    <ion-item ng-repeat="order in orders">
        <a href="tel:{{order.phone}}">
           <div ng-click="makePhoneCall(order)">
               <img width="50" height="50" src="img/phone.ico" />
          </div>
      </a>
 </ion-item>

The a href works great and opens the phone. The method makePhoneCall is also executed before the phone is opened, the problem is that when I execute http request inside this method it is canceled, because the device switches to phone application. When I remove the href element the request is finished successfully.

Is there a way to open phone application from code NOT using href ? or any idea how can I delay the href to open the phone only after http request finished ?

2

Have you tried

window.open('tel:'+PhoneNumber);

or

window.location.href="tel://"+PhoneNumber;

Didn’t test but something along those lines might work for you if you call one of those methods from makePhoneCall after the http request succeeds.

Let me know if it works

1 Like
3

window.open should do the trick.

window.open('tel:'+PhoneNumber);
2 Likes
4

This works great ! Thanks.

5

I’m also trying but cannot get trough on the iOS Simulator.

tried both – for the moment with a fixed phone number:

<a class="tab-item" href="#" onclick="window.open('tel:0039340123456')"><i class="icon ion-ios-telephone-outline"></i></a>

but I get an error in the console:

2015-04-01 15:14:05.459 InRuTouMapp[6069:1676584] CDVWebViewDelegate: Navigation started when state=1 2015-04-01 15:14:05.460 InRuTouMapp[6069:1676584] Failed to load webpage with error: CDVWebViewDelegate: Navigation started when state=1 2015-04-01 15:14:05.460 InRuTouMapp[6069:1676584] Failed to load webpage with error: The URL can’t be shown

ionic info:

OS: Mac OS X Yosemite Node Version: v0.10.36 Cordova CLI: 4.3.0 Ionic CLI Version: 1.3.18 Xcode version: Xcode 6.2 Build version 6C131e ios-sim version: 3.1.1 ios-deploy version: Not installed

Can anyone please offer a solution?
Thanks in advance!

6

is it possible that it works only on real devices and not on the simulators?
thanks!

7

Yup, this will only work on a real device.

8

just found out that on the a real iPhone all these works as expected:

href=“tel:123456"
href=”#" onclick=“window.open(‘mailto:me@example.com’,’_system’)“
href=”#” onclick=“window.open(‘example.com’,’_system’)”

the last two requires:

while on a real Android (4.3 Jelly Bean) the mailto opens an email within the app window – however it’s possible to return to the app by tapping on the back button

Android update: I tried to send the email and after the app sends it out it properly returns to the main app screen!

yeeee

9

First, we want to install Cordova native plugin in CLI
$ ionic cordova plugin add call -number
$ npm install --save @ionic-native/call-number
Fellow the step blow website. I hope it will be helpful to you.

http://techionichybride.blogspot.com/2017/10/how-to-make-phone-call-example-in-ionic.html