Ionic 4/5 Manage Phone Contacts, Call and Display

Calling someone isn't as expensive as it used to be because of cheap unlimited phone plans.

The User Experience of a mobile app can be improved by giving users more ways to communicate through the app.

In this "ionic/Angular Contacts" tutorial, we'll look at the following tasks:

1. You can look at a user's phone contacts.
2. Show them in Ionic Application
3. Call on the phone

Here's the last look at the app we're going to build:

↡

First, you must set up your Ionic Project and install any plugins you need. You need to follow the below steps to install the required plugins in Ionic/Angular application:

ionic start caller blank
ionic cordova plugin add call-number
npm install --save @ionic-native/call-number
ionic cordova plugin add cordova-plugin-contacts
npm install --save @ionic-native/contacts

We get two plugins for Cordova & Ionic:

• Contacts: To get to a user's list of contacts
• CallNumber: To talk on the phone

The following file is app.module.ts. You must import CallNumber and Contact into this file to get the application to work.

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

@NgModule({
  .
  .
  .
  providers: [
    .
    .
    .
    CallNumber,
    Contacts
  ]
}

We bring the plugins import and add them to Angular's list of Providers.

We can now use them at home.ts file:

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

export class HomePage {
  everybody: any;
  constructor(private callNumber: CallNumber, private contacts: Contacts) {
    this.everybody = this.contacts.find(["*"]);
  }
  .
  .
  .
}

There will be one variable on the HomePage called everybody, This variable will get and hold all the information for users contacts.

The CallNumber & Contacts Services are imported in the HomePage constructor.

Be careful because the injected contacts property is not an array of contacts. It's a Service that can be used like a database Service. The find method is used to get all of the available contacts. We can ask for specific references by passing an array of fields, but we don't need this feature, so the "*" parameter is enough.

The everybody variable will hold all the contacts, which you can use to show contacts in our app.

Let's go to the page.html file to show who we are. The information will be shown in the home.html file:

 <ion-list>

    <ion-item *ngFor="let contact of everybody | async">
    </ion-item>

  </ion-list>

everybody is a Promise, so the async Filter is needed here.

Because ngFor will wait for array data. The UI is made with the <ion-list> and <ion-item> pair. For each contact, <ion-item> will be made.

<ion-item> will contain the following code to render contacts:

    <ion-item *ngFor="let contact of everybody | async">

      <ion-icon slot="start" *ngIf="contact?.phoneNumbers"
        (click)="callContact(contact?.phoneNumbers[0]?.value)"
        ios="ios-call"
        md="md-call"
        tappable></ion-icon>

      <ion-label>
        {{ contact?.name?.givenName }}
      </ion-label>
    </ion-item>

The most complicated Element here is the ion-icon. Which will add a caller icon to our app, and when we click on the icon, the number will be called. And below this, we will show the name of the contact.

The slot="start" attribute will be used and it will place ion-icon to the left.

Some contacts might not have a phone number. The ngIf Directive helps us deal with this by only showing the icon if there is a phone number.

The ios and MD attributes tell the browser which icon to use for iOS & Android (MD for Material Design).

Last, the callContact method in the home.ts page will be called when the click event happens.

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

Next open home.ts file and add our final method. You can add the following function to call to the specific number in our application:

  callContact(phone: string) {
    this.callNumber?.callNumber(phone, true)
      .then(() => console.log('Caller Launched!'))
      .catch(() => console.log('Error launching caller'));
  }

The callContact method will use the callNumber form from the callNumber Service.

If the last argument of this method is valid, the call will be made using the dialer/caller on the Native device.

And voila!

We have a list of people to call, and we can do it!

Now. We're all done now!

Conclusion

We've learned how to get phone contacts from the phone to our Ionic app and how to call a number using the dialer on the native device.

After you finish this tutorial, you still have a lot of work to do. You can't test this in a web browser; you must run the app on your actual device or an android emulator.

If you have any questions, please leave them in the box below & we will help you.