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';

declarations: [
imports: [
bootstrap: [IonicApp],
entryComponents: [
providers: [
    {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';

selector: 'home',
templateUrl: 'home.html',
export class HomePage {

constructor(private callNumber: CallNumber) {

        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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top