Ionic 3+ – How to Call a Number Directly from Ionic 3.X Native Application

To make it more convenient, we can add a feature to make calls directly through the application. In this post, we will create an Ionic 3 application, in which we can directly call a number by using Cordova and Ionic Native plugins.

Let’s start…

Create a new Ionic 3 application

First, make sure you have the latest version of Ionic CLI installed

$ npm install -g ionic cordova

Open Command prompt and run following commands to create a new project

$ ionic start Ionic3CallNumber blank
$ cd Ionic3CallNumber

Install Plugins

After creating application we will install Cordova and Ionic Native plugins.

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

Import Plugins in App Module

Open app.module.ts and replace below code.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { CallNumber } from '@ionic-native/call-number';


@NgModule({
declarations: [
    MyApp,
    HomePage 
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    CallNumber,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Add Method in Home Component

In home.ts file, we will import plugin then add methods.

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

@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomePage {

constructor(private callNumber: CallNumber) {
}

makeCall(n:string){
        this.callNumber.callNumber(n, true)
        .then(() => console.log('Launched dialer!'))
        .catch(() => console.log('Error launching dialer'));
}

}

Add HTML Button to Make Call

In home.html, we will add a button to make calls

<button ion-button (click)="makeCall('0123 456 98700')">Call Now</button>

Now you can test this application in the real device.