Lazy loading phone contacts


#1

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>


#2

maybe with http://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/


#3

I did that
Thank you.


#4

try this plugin https://github.com/dbaq/cordova-plugin-contacts-phone-numbers instead the other, is more faster


#5

how do i import that and use that


#6

there in the link is available full description, instalation and use


#7

Today i finally did that without any tutorial


#8

A list generating 3000x3 ngIfs is a performance killer in Angular

Populate the data in such what that u need minimal template dynamics


#9
  1. Contacts and appx taking 4 to 6 sec total coz sending data to server and then displaying it

#10

hi, can you share to us how to do that ?
Thanks.


#11

hi… could you share to us how to import and use it in ionic 3.
Thanks