Making Phone Calls to Contacts with Ionic in one go

Thanks to cheap costs from unlimited phone plans, calling someone is not expensive as it used to be.
Adding more ways of communication in a mobile application can improve the User Experience.

In this tutorial, we will have a look at how we can:

  1. Access a user’s phone contacts
  2. Display them
  3. Make a phone call

As usual it all starts with installations:

We grab two Cordova and Ionic plugins:

  • Contacts: To access the user’s contacts
  • CallNumber: To make a phone call

Moving on to the app.module.ts file:

We import the plugins and add them to the list of Providers for Angular.

Now we can use them in the home.ts file:

The HomePage will have one property named everybody, this property will receive the information for every contacts.
The CallNumber and Contacts Services are imported in the constructor.

Be careful here, the contacts property that is injected is not an array of contacts. It’s a Service that can be used, a bit like a database Service.
The find method is used to fetch the available contacts,  we can ask for specific contacts by passing an array of fields, however, we don’t need this feature so the “*” parameter is enough.

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

The home.html file will display the data:

The everybody parameter is a Promise, the async Filter is required here because ngFor is waiting for an array.
The <ion-list>, <ion-item> combo is used to create the UI. One <ion-item> will be created for each contact.

Inside of this <ion-item>:

The <ion-icon> is the most complex Element here.

The item-start attribute will place it to the left.
Some contacts might not have a phone number, the ngIf Directive helps us to handle this case and only displays the icon if a phone number is available.
The ios and md attributes specify which icon to use for the iOS platform and the Android platforms (md for Material Design).
Finally the click event will trigger the callContact method located in the home.ts file, this method will receive the contact’s first phone number.

On the other side, the <ion-label> will display the name of the contact.

Moving to the home.ts file for the final method:

The callContact method will use the callNumber method from the callNumber’s Service (yep a bit repetitive 😀).
The last argument of this method is set to true, it will use the Native device’s dialer to make the call.

And voila!
We have our list of contacts and we can call them!

ionic phone call contacts voicemail

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

5 Comments

  1. June 25, 2017    

    Good tutorial. Thanks for shere it.

    • Matthieu Drula Matthieu Drula
      June 25, 2017    

      You’re welcome :).

  2. Vithika Vithika
    July 3, 2017    

    Nice tutorial…,very much needed example like this..
    but for me it worked well for the first time,but after adding more functions on the page,my call is not working now…

Leave a Reply

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

0 Shares