Solution - Ionic lazy loading or infinite loading large data to HTML view

@champion007 wrote:

To better explain i am using fake API which has data of 5K. Works perfectly on mobile device, tested.

.html file -

<ion-card *ngFor="let post of posts  | slice:0:limit">
    <ion-card-header>
      <ion-card-subtitle>{{post.title}}</ion-card-subtitle>
      <ion-card-title>{{post.title}}</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      {{post.title}}
    </ion-card-content>
  </ion-card>

  <ion-list></ion-list>

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

    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

.ts file

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController, IonInfiniteScroll } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-tab4',
  templateUrl: './tab4.page.html',
  styleUrls: ['./tab4.page.scss'],
})
export class Tab4Page implements OnInit {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  posts: any;
  limit = 10;
  constructor(private http: HttpClient, private navCtrl: NavController) { }

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/photos').subscribe(response => {
      this.posts = response;
    });
  }
  loadData(event) {
    setTimeout(() => {
      this.limit += 10;
      event.target.complete();
      if (this.limit === this.posts.length) {
        event.target.disabled = true;
      }
    }, 300);
  }
}

Hope it help someone.

Posts: 1

Participants: 1

Read full topic