Infinite Scroll in Ionic 3 applications

Infinite scroll is a very useful tool, It is the popular replacement for pagination technique. As we know with the rise of social networks, the “feed” has become a popular design pattern, especially in mobile apps, which gives the idea of infinite scroll which is loading in new items (typically older items) to the bottom of a list as the user scrolls. It has same function as pagination for limiting displayed list of data on the view.

Infinite scroll is better used when getting data from a rest-api like WordPress.

This is what you are going to build!

 

Lets show some code for Infinite Scroll for WP-API (WordPress) posts in an Ionic 3 application.

Getting the WordPress posts onto html:

home.html

<ion-card *ngFor="let post of posts" >
  <ion-title text-wrap [innerHTML]="post.title.rendered" (click)="postTapped($event, post)">                </ion-title>
 <p text-wrap [innerHTML]="post.excerpt.rendered"></p>
 <a (click)="postTapped($event, post)"> Read more..</a>
 </ion-card>

Ionic directive we are going to use is the ion-infinite-scroll

<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">

This <ion-infinite-scroll> should be below some kind of list.

Infitite Scrolling shown in Html.

home.html

<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
 <ion-infinite-scroll-content
 loadingSpinner="bubbles"
 loadingText="Loading more posts ...">
 </ion-infinite-scroll-content>
 </ion-infinite-scroll> 

we’re going to be making a call to the wordpress API to get some data to play with. To do this, we’ll create a .ts file that makes these API calls. This will have one provider which makes the main call through the URL and will be called when our app loads to get the initial data and the Infinite scroll will be called each time we need to load in new posts for the infinite scroll.

providers/wordpress.ts

import { Http, Headers } from '@angular/http';
import * as Config from '../../config';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/forkJoin';
.......
getRecentPosts(categoryId:number, page:number = 1){
 //if we want to query posts by category
 let category_url = categoryId? ("&categories=" + categoryId): "";
 return this.http.get(
 Config.WORDPRESS_REST_API_URL
 + 'posts?page=' + page
 + category_url)
 .map(res => res.json());
 }
 getCategory(category){
 return this.http.get(Config.WORDPRESS_REST_API_URL + "categories/" + category)
 .map(res => res.json());
 }
}

and finally the home.ts file

import { WordPressProvider } from '../../providers/wordpress/wordpress';
.......
export class HomePage {
 posts: Array<any> = new Array<any>();
 morePagesAvailable: boolean = true;
 constructor(...){}
ionViewWillEnter() {
 this.morePagesAvailable = true;
 this.WordpressProvider.getRecentPosts(this.categoryId)
 .subscribe(data => {
 for(let post of data){
 post.excerpt.rendered = post.excerpt.rendered.split('<a')[0] + "</p>";
 this.posts.push(post);
 }
 loading.dismiss();
 });
 }
 }
 getPosts(ev){
 this.ionViewWillEnter();
 var val =ev.target.value;
 if(val&& val.trim()!=''){
 this.posts = this.posts.filter((post) => {
 return (post.toLowerCase().indexOf(val.toLowerCase()) > -1);
 })
 }
 }

We still need to do one final thing. We need to let the ion-infinite-scroll know that we’re done loading in the new items. To do this, we need to broadcast the doInfite() event.

////from here the infite scroll starts

doInfinite(infiniteScroll) {
 let page = (Math.ceil(this.posts.length/10)) + 1;

//as wp-api shows 10 posts per page only
 let loading = true;

//calling provider for recent posts by category
 this.WordpressProvider.getRecentPosts(this.categoryId, page)
 .subscribe(data => {
 for(let post of data){
 if(!loading){
 infiniteScroll.complete();
 }
 post.excerpt.rendered = post.excerpt.rendered.split('<a')[0] + "</p>";
 this.posts.push(post); 
 loading = false;
 }
 }, err => {
 this.morePagesAvailable = false;//when the total blog posts are showed.
 })
 }

Infinite Scroll is described in this post deeply with the help of our previous post  i.e. Mobile Application using WordPress WP-API Ionic 3 where we used WP-API to get the post from WordPress blogs.

Leave a Reply

Your email address will not be published. Required fields are marked *