Hi guys, lets move this ionic app development series to making out very first ionic cordova phonebook contact app. Many a time we need our app to contact the phonebook to get the some user contact number. Ionic provide this easily with the help of a phonebook cordova plugin. Plugins are a code snippet which you can use without have to make the functionality yourself. Ionic provide a list of Native Plugins here. Native plugins are a way of interacting with the native device functionality. You guys can read more about ionic, native plugins and hybrid apps on your own for better understanding.




Now lets dive into doing something.

Create a new app

First, let create a Contact book demo in which we are going to pick a contact number from phone book, so we will name it mycontactdemo

ionic start mycontactdemo blank

This will ask for a few step, please include the cordova which it prompt to add as this make use of native functionality and it is achieved by cordova.

Install Platforms

Then we need to add atleast one platform be it android/Ios

ionic cordova add platform android/ios

Install Plugin and Node Module

Now we need to add the plugin for phonebook functionality. We can get the list of Native plugins here.
We are going to use Contacts Plugin here.

ionic cordova plugin add cordova-plugin-contacts
npm install --save @ionic-native/contacts

Now we need to add imports in our app.module.ts file like:

providers: [
...,
Contacts,
...,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]




View Changes

After completed all the setup related task now we need to update our view in the home.html file to open the phonebook and display the selected contact number as:

<ion-content padding="">
    Selected Contact Number: {{phone_no}}
  

  <button ion-button="" click="" getcontact="">Button</button>

</ion-content>

And finally we have to write the method getcontact() to receive the button’s click handler event as:

Component/Controller changes

First we need to add the contact plugin as dependency injection method like:

  constructor(
    private contacts: Contacts,
    ...
  ) {
      ...
      ...
  }

Now the Contacts Plugin methods are available to home.ts file and can be accessed by using “contacts” variable.
Now we will add the “phone_no” variable to receive the result of the phonebook contact number like:

phone_no: any;

at the top of the ts file.

Now comes the getcontact() function to open the phonebook and return the selected phone number as:

getcontact() {
    this.contacts.pickContact().then((res: Contact) => {
      console.log("Get contact Success");
      console.log(res.phoneNumbers);
      this.phone_no = res.phoneNumbers;
    }).catch(err => {
      console.log("Get contact Error");
      console.log(err);
    });
  }

Here we access the pickContact function available to us by contacts plugin. It will return the selected contact number as promise which we received inĀ  res: Contact . This res is a JSON object of Contact type which contains the phone number list. So if a particular contact has more than one phone number. Then we need to pick one. For this selection we can use a popup to handle multiple phone numbers as user can pick one to be display on the homepage.




Handle Multiple contact numbers

The code to handle multiple phoneNumbers for a contact can be handled in this manner, if we have to show only one result. We will show a popup to user to pick a contact out of multiple to be displayed.

showRadio(list:any) {
    let alert = this.alertCtrl.create();
    alert.setTitle('Phone no to use');

    for(var i=0; i<list.length; i++){ alert.addInput({ type: 'radio', label: list[i].value, value: list[i].value }); } alert.addButton('Cancel'); alert.addButton({ text: 'OK', handler: data => {
        if(data != undefined){
          console.log(data);
            this.phone_no = data;
        }else{
          console.log("No number selected");
        }
      }
    });
    alert.present();
  }

Here we are generating a popup with dynamic checkbox entries which will depend upon the response of the contact object in the getcontact() function. It will show one or multiple entries depending upon the contact response object. And the selected result will be updated on the home page. But for this popup to be visible on screen we have to pass the update the getcontact method to:

getcontact() {
    this.contacts.pickContact().then((res: Contact) => {
      console.log("Get contact Success");
      this.showRadio(res.phoneNumbers);
    }).catch(err => {
      console.log("Get contact Error");
      console.log(err);
    });
  }

Now it will open the popup to show all the contact numbers in the phonebook for the selected contact. And when we select one of the available contact number it will be presented on the screen.

Run the app on device

One of the most important thing is to note here is that this can not run on a browser as it requires a native platform to run due to present of Native functionality and cordova plugin. So when we try to run this on browser it will give warning in the console that cordova plugin is missing.

Then how to run this application, don’t worry i have covered this in detail here.
Code to this complete tutorial can be download here from Github.




Download the Free ionic cordova phonebook contact app source here.

 


Leave a Reply

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