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:
- Access a user’s phone contacts
- Display them
- 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.
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.
We have our list of contacts and we can call them!