Ionic 2+ - Make Phone Calls with Cordova and Ionic Native 3.x+

Introduction


The primary task of a phone device is to make calls so being able to make calls in Ionic framework is a nice feature that can be leveraged to create awesome apps .

In this tutorial we will be seeing how to use Cordova and Ionic Native 3.x+ to make phone calls from within Ionic mobile apps .

Getting started


As always you can start by scaffolding a new Ionic 2+ application using the Ionic CLI .

So head over to your terminal/prompt and run :

ionic start IonicPhoneCallExample blank 
cd IonicPhoneCallExample 

Now we need to install Cordova plugin for making phone call and its Ionic Native 3.x+ wrapper :

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

Head over to src/app/app.module.ts then add :

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 {}

Next open src/pages/home/home.ts and add a method to make a phone call .

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) {
}

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

}

Open src/pages/home/home.html then add a button to launch the dialer .

<button ion-button (click)="launchDialer('00 00 00 00')">Call 00 00 00 00</button>

Conclusion


You can now add a target platform then test your app in a real mobile device .

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status