Ionic : how to use Infinite Scroll for displaying contact list

@ajaykdutta wrote:

I am using Ionic4 . I am trying to display the phone contact list but the loading time for the list is too slow. I want to use Infinite Scroll but its not working . I am new in ionic so please help me .
My html file code :

<ion-content padding >
      <ion-searchbar (keyup)="SerachContact($event)" ></ion-searchbar>
      <ion-list  *ngFor="let contact of contactlist; let i = index;" >
      <ion-item >
      <ion-grid>
      <ion-row>
        <ion-col>
          <div>
            <ion-icon ios="ios-person" md="md-person"></ion-icon> <b>  {{contact.displayName}}</b>
          </div>
        </ion-col>
        </ion-row>
      <ion-row>
        <ion-col  size="10">
          <div>
            <ion-icon item-start  ios="ios-call" md="md-call" ></ion-icon> {{ contact.phoneNumbers[0].value}}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    </ion-item>
    </ion-list>

 <ion-infinite-scroll threshold="100px (ionInfinite)="onInfiniteScroll($event)">
        <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

    </ion-content>

and my ts file code :

import { Component, OnInit ,ViewChild} from '@angular/core';
import { Router } from '@angular/router';
import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts/ngx';

import {  NavController,IonInfiniteScroll} from '@ionic/angular'; 

import { CallNumber } from '@ionic-native/call-number/ngx';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.page.html',
  styleUrls: ['./contact.page.scss'],
  providers: [Contacts],
})

export class ContactPage implements OnInit {

 @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  ngOnInit() {
  } 

 contactlist: any[];   

   constructor(public navCtrl: NavController,private router: Router, 
     private contacts: Contacts , public callNumber: CallNumber ) {

      this.contacts.find(["displayName", "phoneNumbers"], {multiple: true}).then((contacts) => {
        this.contactlist = contacts;
          this.contactlist.sort(function(a, b) {
             return compareStrings(a.displayName, b.displayName);
          });  
      });
}

onInfiniteScroll(event) {
      setTimeout(() => {
      console.log('Done');
      event.target.complete();
      if (data.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);    
}

How can I use Infinite Scroll for fast display . please give some idea. thanks in advanced

Posts: 1

Participants: 1

Read full topic