Ionic 2 – Creating contacts and querying them

Hi Friends,

Hope you are all well. A few days back one of our friends Henry mailed me asking me to do a post on using the Contacts plugin in Ionic 2. So here we go.

The contacts plugin is under the ionic-native set of plugins which enhance the capabilities of our Ionic 2 apps. Let’s see how we could use it in our app.

Let’s get started.

The complete code of this tutorial is available here.

A screencast of the tutorial:

Create a new app using the below command and cd into the app directory.

Then add the Contacts plugin using the below command.

Now open up home.html and add the below code inbetween the ion-content tags.

This would create a couple of buttons and a input field. The first button will be used to add a contact whereas the input field and the second button would be used to search for a contact among the contacts in the mobile.

Open up home.js and add the below code.

Let’s break this down.

  1. The Contacts class is imported from ionic-native.
  2. I use two methods the savefn() and findfn(). The first one simply navigates us to another page (AddcontactPage).
  3. In the findfn I am using the find() method of the contact class and passing the value which we receive from the user in the text input.
  4. As you could see the find method has another parameter where I have given [‘*’]. This is simply the fields you want to search for the value. * denotes all fields. I could also give displayName or nickname.
  5. The returned array is passed on to an array contactsfound which is then iterated on the html page using a ngFor.

Now let’s create the AddcontactPage. Open up the terminal again and (inside the ionic project folder) give the below command.

This will generate the new page. Get into the AddContact directory, open up addcontact.html and add the below code in between the <ion-content> tags.

I have simply added 3 input fields and a select field along with a button.

Open up addcontact.js and add the below code.

Let’s break this down.

  1. I am creating a new contact object using Contacts.create(). Now this object will have the below string;
    displayName?: string;
    name?: ContactName;
    nickname?: string;
    phoneNumbers?: ContactField[];
    emails?: ContactField[];
    addresses?: ContactAddress[];
    ims?: ContactField[];
    organizations?: ContactOrganization[];
    birthday?: Date;
    note?: string;
    photos?: ContactField[];
    categories?: ContactField[];
    urls?: ContactField[];
  2. Now just for the sake of simplicity I am taking only displayName, nickname and phoneNumbers from these properties and adding them to our created contact.
  3. As you could see the phoneNumbers are of type ContactField[]. So I am creating a ContactField object using new ContactField() and then adding the type, value and pref to this object. Then I am pushing this object into an array before finally passing it to the contact object.
  4. Finally, I am invoking the save method on the contact object and saving it to our phone contacts.

That’s it. It’s simple; right ?

Test the app on the phone or device (Browser won’t work since we are using a cordova plugin).

Hope this helped you guys. Thanks for reading. Peace.. :)


  • Hieu Luong

    Hi, thanks for your tutorial, but do you know how to get all contacts? If we use “find” function, so which parameters to pass through? I experiment on this “find” method, and it takes quite a lot of time (3 or 4 minutes) to show the result. If we use contacts.pickup(), so how we can add the view into the navigation?

  • Adir Zoari

    thanks for tutorial,do you have ionic 2 RC0 tutorials?(latest version of ionic2)

  • Andrè Driesel

    Is this tutorial still up to date?

  • Jose Alfonso Suarez Moreno

    Don´t work with Ionic 2.2.11 :-(

  • rlmattax

    Do you know of any way to use/test this functionality in the browser still when using ionic serve ?