How To Call A Telephone Number In Ionic 3 With Ionic Native

This is a step-by-step guide on how to install and integrate @ionic-native/call-number in to your Ionic 2+ application. This plugin will allow you to enable the user to launch the Phone/Call/Dialer app from their smart phone and initiate a phone call.

On iOS, this is what the prompt will look like:

You can read more about the @ionic-native/call-number plugin here.

How to call a telephone number in Ionic 3 using Ionic Native

I will assume you already have an Ionic application set up. For the purposes of this tutorial, we will create a simple button which the user presses to make a telephone call. The number called will be hard-coded, but it is up to the developer to make this dynamic if necessary. In addition, you will be able to use the same logic in other situations such as automated phone calls, and phone calls when certain criteria are met.

Step 1: Install the Cordova and Ionic Native plugins from the command line:

$ ionic cordova plugin add call-number
$ npm install --save @ionic-native/call-number

Step 2: Import the providers in to your application. For most applications this will be in the src/app/app.module.ts file. Your AppModule declaration will now be something like this:

@NgModule({
  declarations: [
    MyApp,
    SearchPage,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen
    ...
    CallNumber
  ]
})
export class AppModule {}

Note the CallNumber import in the providers array.

Step 3: Next, we will create a simple button in one of our template files. You could use the follow code snippet:

<button type="button" ion-button color="primary" (click)="callNumber()">Call Number</button>

Step 4: Then, in the relevant component TypeScript file for the template we need to add logic for the callNumber() function we are referring to on the (click) attribute. Here is an example:

import { Component } from '@angular/core';
import { CallNumber } from '@ionic-native/call-number';

@Component({
    selector: 'page-test',
    templateUrl: 'test.html',
})
export class TestPage {
    constructor(private callNumber: CallNumber) { }

    callJoint(telephoneNumber) {
        this.callNumber.callNumber(`02073627291`, true);
    }
}

We inject the CallNumber class via the constructor to instantiate the service. Then, we simply need to invoke the callNumber() method and pass it a string value for the telephone number to call. I recommend the boolean is set to true to skip the app selector. If you want your user to be able to select through which app they make the call, set this boolean to false.

Prior to offering to make the call, we can check if the user’s device supports making calls (for example, tablets may not). This can be done with the following method on the same service. It returns a promise, which you can then chain to a call-back function to carry out logic once the check has been made:

this.callNumber.isCallSupported()
.then(function (response) {
    if (response == true) {
        // do something
    }
    else {
        // do something else
    }
});

Share on Facebook1Tweet about this on TwitterShare on Google+0Share on Reddit10Share on LinkedIn1Email this to someone

Subscribe to Email Updates