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.
|
1 |
ionic start ionic2contacts blank --v2 |
Then add the Contacts plugin using the below command.
|
1 |
ionic plugin add cordova-plugin-contacts |
Now open up home.html and add the below code inbetween the ion-content tags.
|
1 2 3 4 5 6 7 8 |
<button (click)="savefn()">Add Contact</button> <ion-input type="text" [(ngModel)]="contacttobefound" placeholder="Enter display name"></ion-input> <button (click)="findfn(contacttobefound)">Find</button> <ion-list [hidden]="!search"> <ion-item *ngFor="#item of contactsfound"> {{item.displayName}} </ion-item> </ion-list> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import {Page, NavController} from 'ionic-angular'; import {Contacts} from 'ionic-native'; import {AddcontactPage} from '../addcontact/addcontact'; @Page({ templateUrl: 'build/pages/home/home.html' }) export class HomePage { static get parameters() { return [NavController]; } constructor(nav) { this.nav = nav; this.contacttobefound = ''; this.contactsfound = []; this.search = false; } savefn() { this.nav.push(AddcontactPage); } findfn(val) { Contacts.find(['*'], {filter: val}).then((contacts) => { this.contactsfound = contacts; alert(JSON.stringify(contacts[0])); }) if(this.contactsfound.length == 0) this.contactsfound.push({displayName: 'No Contacts found'}); this.search = true; } } |
Let’s break this down.
- The Contacts class is imported from ionic-native.
- I use two methods the savefn() and findfn(). The first one simply navigates us to another page (AddcontactPage).
- 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.
- 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.
- 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.
|
1 |
ionic generate page addcontact |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ion-input type="text" [(ngModel)]="newcontact.displayName" placeholder="Enter Display Name"></ion-input> <ion-input type="text" [(ngModel)]="newcontact.nickname" placeholder="Enter Nick Name"></ion-input> <ion-input type="text" [(ngModel)]="newcontact.phnumber" placeholder="Enter Phone number"></ion-input> <ion-list> <ion-item> <ion-label>Type</ion-label> <ion-select [(ngModel)] = "newcontact.phtype"> <ion-option value="home">Home</ion-option> <ion-option value="work">Work</ion-option> <ion-option value="other">Other</ion-option> </ion-select> </ion-item> </ion-list> <button (click)="addcontact(newcontact)">Save</button> |
I have simply added 3 input fields and a select field along with a button.
Open up addcontact.js and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import {Page, NavController} from 'ionic-angular'; import {Contacts} from 'ionic-native'; /* Generated class for the AddcontactPage page. See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation. */ @Page({ templateUrl: 'build/pages/addcontact/addcontact.html', }) export class AddcontactPage { static get parameters() { return [[NavController]]; } constructor(nav) { this.nav = nav; this.newcontact = { displayName: '', nickname: '', phnumber: '', phtype: '' } } addcontact(newct) { var contact = Contacts.create(); contact.displayName = newct.displayName; contact.nickname = newct.nickname; var contactfield = new ContactField(); contactfield.type = newct.phtype; contactfield.value = newct.phnumber; contactfield.pref = true; var numbersection = []; numbersection.push(contactfield); contact.phoneNumbers = numbersection; contact.save().then((contact) => { alert('saved'); }, (error) => { alert(error); }) } } |
Let’s break this down.
- I am creating a new contact object using Contacts.create(). Now this object will have the below properties.id?: 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[]; - 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.
- 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.
- 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.. 
