Lazy loading phone contacts

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:

      this.loadingElem = this.loadingCtrl.create({
        spinner: 'ios',
        content: 'Getting contact list please wait...'
      var opts = {   
        fields: ['displayName', 'name' , 'emails', 'addresses'],
        multiple: true,        
      this.contacts.find(['displayName', 'name' , 'emails', 'addresses'],opts).then((contacts) => {
        contacts.filter((item) => {
          var id =;
            var address = item.addresses[0].formatted;
            var first_name =;
            var last_name =;
            var email = item.emails[0].value;
            var phone = item.phoneNumbers[0].value;
          let clientData = {
            address: address,
            first_name: first_name,
            last_name: last_name,
            email: email,
            phone: phone


        let modal = this.modalCtrl.create('ContactListPage',{
          business_id: this.business_id,
          contact_list: this.phoneContactList
      }, (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() {


Here is the ContactListPage .html

    <ion-item *ngFor="let contact of contact_list">
      <ion-avatar item-start>
        <!-- some avatar -->
      <h2>{{contact.last_name}} {{contact.first_name}}</h2>
      <div *ngIf="!=''">{{}}</div>
      <div *ngIf="!=''">{{}}</div>
      <div *ngIf="contact.address!=''">{{contact.address}}</div>

maybe with

I did that
Thank you.

try this plugin instead the other, is more faster

how do i import that and use that

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

1 Like

Today i finally did that without any tutorial

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

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

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

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

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

i only implemented on ionic1

you solved this ??? how ??? please share your code


I am dealing with the same case than you, reading the contacts from the phone and checking if they are registered in the backend server. I am currently struggling to get acceptable performance just reading the contacts from the phone. Have you solved your issue with th this plugin ?

How do instantiate it in ionic ?

Thank you