The refresh functionality is very easy with the mobile application using the pull to refresh option. Pull to refresh is the stylish way to refresh the content. Many people familiar with this design. Mostly all browsers had this feature. In this tutorial, we are going to implement the pull to refresh on the Ionic 2 application.

Preview Using the Browser.

Ionic 2 framework offers the pull to refresh functionality as built-in. It is very easy to implement too. The syntax is below.

<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>

The doRefresh is a user defined function, which will be called whenever you pull. And you can write whatever code you want, inside the doRefresh function.

To demonstrate this concept, I used some Ajax request.

Create a new Ionic 2 project using the below command.

ionic start proj_name blank --v2

Add the below code in the home.html file.

<ion-list>

<ion-item *ngFor="let x of users" >
<ion-avatar item-start>
<img src="{{x.picture.large}}">
</ion-avatar>
<h2>{{x.name.title}}. {{x.name.first}}</h2>
<p>{{x.email}}</p>
<ion-note item-end>{{x.registered}}</ion-note>
</ion-item>

</ion-list>

<ion-refresher (ionRefresh)="load($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>

The above code calls the load function whenever you pull the page and retrieves some information from the web. And stores the information on the users variable. The users variable iterated using the ngfor and display the information in the Ionic 2 list format.

Now import the Http to the home.ts file.

import {Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

Create a Http reference using the constructor.

constructor(public http:Http) {

}

Then add the below code in the home.ts file.

count=1
users:any
load(refresher)
{
this.http.get('https://randomuser.me/api/?results='+this.count)
.map(res => res.json())
.subscribe(res => {
this.users=res.results;
this.count+=1;
refresher.complete();
}, (err) => {
alert("failed");
});
}

The load function calls the URL and stores retrieved information on the users variable. The count variable is used to increment the return result size. Each time you refresh the page, it will load more data.

Customizing the Loading Icon.

You can change the loading icon, and loading text too. Use the below code to change the loading icon.

<ion-refresher (ionRefresh)="load($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>

The pullingIcon and refreshingSpinner are the icon component. You have to use your desired icon.

To know more about the loading icon, use the below link.

https://ionicframework.com/docs/api/components/loading/LoadingController/

Below are the Ionic 2 information while writing this post.

Cordova CLI: 6.5.0 

Ionic Framework Version: 3.0.1

Ionic CLI Version: 2.2.1

Ionic App Lib Version: 2.2.0

Ionic App Scripts Version: 1.3.0

ios-deploy version: Not installed

ios-sim version: 5.0.13 

OS: macOS Sierra

Node Version: v6.10.0

Xcode version: Xcode 8.2.1

 

home.html source code

<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>

<ion-refresher (ionRefresh)="load($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>


<ion-list>

<ion-item *ngFor="let x of users" >
<ion-avatar item-start>
<img src="{{x.picture.large}}">
</ion-avatar>
<h2>{{x.name.title}}. {{x.name.first}}</h2>
<p>{{x.email}}</p>
<ion-note item-end>{{x.registered}}</ion-note>
</ion-item>

</ion-list>



</ion-content>

home.ts source code.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public http:Http) {

}
count=1
users:any
load(refresher)
{
this.http.get('https://randomuser.me/api/?results='+this.count)
.map(res => res.json())
.subscribe(res => {
this.users=res.results;
this.count+=1;
refresher.complete();
}, (err) => {
alert("failed");
});
}
}