Lazy loading phone contacts

November 17, 2017, 6:11 am

≫ Next: Element positioning and dragging in Ionic

≪ Previous: Import custom component module problem

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 :frowning:

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 :frowning:

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>

Posts: 1

Participants: 1