I have some data in a SQL lite database. I’d like to use the infinite scroll to boost performance. I read the Ionic frame documentation at the following link.
https://ionicframework.com/docs/api/infinite-scroll
This is my Home.html
<ion-header>
<ion-toolbar class="app-theme-color">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Routes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content color="secondary">
<ion-grid>
<ion-row>
<ion-col>
<ion-card *ngFor="let route of itemListData">
<ion-row>
<ion-col>
<div class="ion-text-begin">
{{ route.nameroute }}
</div>
</ion-col>
<ion-col>
<div class="ion-text-end">
{{ route.cost }}
</div>
</ion-col>
</ion-row>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
And this is my Home.ts file
import { Component, OnInit } from '@angular/core';
import { DatabaseService } from '../services/database.service';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
itemListData = [];
page_number = 1;
page_limit = 8;
constructor(private databaseService: DatabaseService) { }
ngOnInit() {
this.getFavoriteRoutes(false, "")
}
getFavoriteRoutes(isFirstLoad, event) {
this.databaseService.getDatabaseState().subscribe((data: any) => {
for (let i = 0; i < data.length; i++) {
data = this.databaseService.getRoutes();
this.itemListData.push(data[i]);
}
if (isFirstLoad)
event.target.complete();
this.page_number++;
})
}
doInfinite(event) {
this.getFavoriteRoutes(true, event);
}
}
And these are my Database Service methods.
getDatabaseState() {
return this.dbReady.asObservable();
}
getRoutes(): Observable<any[]> {
return this.routes.asObservable();
}
Getting the favorite routes works, and all of the data is visible in my ionic app. I modified the getFavourites method to make use of the infinite scroll.
I followed this tutorial to do it.
https://www.freakyjolly.com/ionic-infinite-scroll-example/
The data is no longer visible as a result of the changes.
To improve performance, how can I add infinite scroll to SQL data?