Ionic 4 How to Call a Number Directly from Ionic 4 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 4 application, in which we can directly call a number by using Cordova and Ionic Native plugins.

Let’s start…

Also Read: Ionic 4 | Read Call Logs (Incoming, Missed, Outgoing) and Add Call Number in Ionic 4 Native

Create a new Ionic 4 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 Ionic4CallNumber blank --type=angular
$ cd Ionic4CallNumber

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@beta

Import Plugins in App Module

Open app.module.ts and replace below code.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { CallNumber } from '@ionic-native/call-number/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule, 
    FormsModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    CallNumber,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Add Method in Home Component

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

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


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {

  constructor(
    private callNumber: CallNumber
  ) {

  }

  callNow(number) {
    this.callNumber.callNumber(number, true)
      .then(res => console.log('Launched dialer!', res))
      .catch(err => console.log('Error launching dialer', err));
  }

}

Here callNumber method accepts two parameters, first is number to call, second it boolean to select between available applications.

Add HTML Button to Make Call

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

 <button ion-button (click)="callNow('18001010101')">Call Now</button>

Above we created an Ionic 4 Application with CallNow method to make calls directly from an application. Now you can test this application in the real device.

Category: Ionic Framework