Ionic pick Contact using cordova native plugin

Ionic Native
1

Please how do I pick contacts from my phone in ionic 3, Have tried all methods but still not working …I"m kinda new to typescript…
here is my code

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams ,} from ‘ionic-angular’;
import{EnterPinPage} from ‘…/enter-pin/enter-pin’;
import { Contacts, Contact, ContactField, ContactName, ContactFindOptions, ContactFieldType } from ‘@ionic-native/contacts’;

/**

@IonicPage()
@Component({
selector: ‘page-share’,
templateUrl: ‘share.html’,
})
export class SharePage {
contactsfound = [];
search = false;

constructor(public navCtrl: NavController, public navParams: NavParams, private contacts: Contacts) {

}

openEnterPIN(){
this.navCtrl.push(EnterPinPage)
}

loadContacts(){
	
	var navigator:any; 
	navigator.contacts.pickContact(function(contact){
		console.log('The following contact has been selected:' + JSON.stringify(contact));
},function(err){
		console.log('Error: ' + err);
});
}

findContact(ev:any) {
let fields:ContactFieldType[] = [‘displayName’];

	const options = new ContactFindOptions();
	options.filter = ev.target.value;
	options.multiple = true;
	options.hasPhoneNumber = true;

	this.contacts.find(fields, options).then((contact) => {
		this.contactsfound = contact;
		console.log(JSON.stringify(contact[0]));
	});
	
	if(this.contactsfound.length == 0){
		this.contactsfound.push({displayName: 'No Contacts found'});  
	}
	this.search = true;
}

}

2

I am struggling with this as well.

If you find out, please let me know: twitter.com/xaxim

3

No luck yet, only search working.

4

i can’t get search to work, that would already solve my problems

5

use this to get all your contacts displaying in your ionic app

import { Contacts, Contact, ContactField, ContactName, ContactFindOptions, ContactFieldType } from ‘@ionic-native/contacts’;
import { DomSanitizer } from ‘@angular/platform-browser’;

/**

@IonicPage()
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’,
})
export class HomePage {
contactsfound = [];
search = false;

constructor(public navCtrl: NavController, public navParams: NavParams, private contacts: Contacts, private contact: Contact , private sanitizer : DomSanitizer) {

}
contactList = [];

getContacts(): void {
  this.contacts.find(
    ["displayName", "phoneNumbers","photos"],
    {multiple: true, hasPhoneNumber: true}
    ).then((contacts) => {
      for (var i=0 ; i < contacts.length; i++){
        if(contacts[i].displayName !== null) {
          var contact = {};
          contact["name"]   = contacts[i].displayName;
          contact["number"] = contacts[i].phoneNumbers[0].value;
          if(contacts[i].photos != null) {
            console.log(contacts[i].photos);
            contact["image"] = this.sanitizer.bypassSecurityTrustUrl(contacts[i].photos[0].value);
            console.log(contact);
          } else {
            contact["image"] = "assets/dummy-profile-pic.png";
          }
          this.contactList.push(contact);
        }
      }
  });
}
6

hey u solve this yet? im able to access device contacts but the list is empty

47%20PM
WhatsApp Image 2018-07-25 at 7.50.47 PM.jpeg607×1080 12.2 KB

7

What platform, IOS or android?

8

hey, sorry i solved it…the list is empty because all contacts are saved in SIM card, so i just import it to phone storage. Thanks anyway.

9

Ok…Glad you were able to solve that

10

I’m able to access device contacts but how to display selected contact details in like ex. <ion-input type=“text” [(ngModel)]=“contact.name” name=“name”> ?

11

Use angular for loop to bind to your view