Hi there
I need to add an option of importing phone contacts to the app I am building.
So I work with the cordova-plugin-contacts to get all the contacts in the phone.
I tried to use the alert component with the check options but with a list of 1000+ check options it gets stuck/freeze 
So i am trying to work with Modal component.
I send the contact list result to a modal page where the user can check the contacts he wants to import.
And click ‘Import’ button.
What appends is that all the list is stuck/freeze.
I have more then 3000 contacts…
Y dose it get stuck???
How can maybe lazy load the 3000+ contact list list?
I am stuck with this for days
Here is my code:
Import button:
openContactListClient(){
if(this.platform.is('cordova')){
this.loadingElem = this.loadingCtrl.create({
spinner: 'ios',
content: 'Getting contact list please wait...'
});
this.loadingElem.present();
var opts = {
fields: ['displayName', 'name' , 'emails', 'addresses'],
multiple: true,
hasPhoneNumber:true
};
this.contacts.find(['displayName', 'name' , 'emails', 'addresses'],opts).then((contacts) => {
contacts.filter((item) => {
var id = item.id;
if(item.addresses!=null){
var address = item.addresses[0].formatted;
}
if(typeof item.name.givenName!=='undefined'){
var first_name = item.name.givenName;
}
if(typeof item.name.familyName!=='undefined'){
var last_name = item.name.familyName;
}
if(item.emails!=null){
var email = item.emails[0].value;
}
if(item.phoneNumbers!=null){
var phone = item.phoneNumbers[0].value;
}
let clientData = {
id:id,
address: address,
first_name: first_name,
last_name: last_name,
email: email,
phone: phone
};
this.phoneContactList.push(clientData);
})
this.loadingElem.dismiss();
let modal = this.modalCtrl.create('ContactListPage',{
business_id: this.business_id,
contact_list: this.phoneContactList
});
modal.present();
}, (error) => {
console.log(error);
})
}else{
//error...
}
}
Here is the ContactListPage modal page .ts:
export class ContactListPage {
business_id: number;
contact_list = []
constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) {
this.business_id = this.navParams.get('business_id');
this.contact_list = this.navParams.get('contact_list');
}
ionViewDidLoad() {
}
dismiss(){
this.viewCtrl.dismiss();
}
}
Here is the ContactListPage .html
<ion-list>
<ion-item *ngFor="let contact of contact_list">
<ion-avatar item-start>
<!-- some avatar -->
</ion-avatar>
<h2>{{contact.last_name}} {{contact.first_name}}</h2>
<div *ngIf="contact.phone!=''">{{contact.phone}}</div>
<div *ngIf="contact.email!=''">{{contact.email}}</div>
<div *ngIf="contact.address!=''">{{contact.address}}</div>
</ion-item>
</ion-list>