Pull To Refresh: Ionic 2

In today’s video tutorial, I’ll show you how to add ‘pull to refresh’ functionality to your Ionic 2 application. This works on the web(maybe as a progressive web app), on your real device, and even in simulators!

Before proceeding with today’s tutorial, please make sure to watch and understand Ionic Storage: Ionic 2. Because we’re implementing ‘pull to refresh’ for the same code we built for that tutorial.

Today we shall learn
1. How to add ‘pull to refresh’ functionality.
2. Also to customize the ‘pull to refresh’ outlook assets – like icons, text etc.

Adding ‘Pull To Refresh’ Functionality: Ionic 2

Ion Refresher Code: src/pages/home/home.html

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

Here we add ion-refresher as first child of ion-content. This adds pull to refresh functionality on content component.

Once the user pulls down on the content area of the view, doRefresh method is called and it is passed with the refresher event, which has a method called complete(), when called, it collapses whatever is being shown on the screen by ion-refresher-content ( which is the child of ion-refresher ).

Customize pull-to-refresh
We customize the look and feel of the pull to refresh functionality using ion-refresher-content‘s attributes. In our example, we have changed the default icon and have added text for both when the user pulls the content area down and while the fresh content is being fetched(before the complete() method is called in the home.ts component).

Related Read: ion-spinner Component: Ionic 2

Note:
If we do not explicitly assign or change attributes on ion-refresher-content, it’ll behave according to the defaults of the operating system it’s working on.

Ion Refresher Code – default values for platforms: src/pages/home/home.html

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

doRefresh() method definition: src/pages/home/home.ts

doRefresh(refresher){
    this.storage.get('myStore').then((data) => {
      this.items = data;

      if(refresher != 0)
         refresher.complete();
    }); 
};

Once the doRefresh method is invoked by the view, we fetch the data and once done, we call complete() method on refresher object, which collapses whatever visual cues ionic is providing to the end user via ion-refresher-content.

Full Free Source Code: src/pages/home/home.html

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

< ion-content padding>
  < ion-refresher (ionRefresh)="doRefresh($event);">
    < ion-refresher-content 
      pullingText="Pull to refresh"
      pullingIcon="arrow-dropdown"
      refreshingSpinner="circles"
      refreshingText="..fetching">
    < /ion-refresher-content>
 < /ion-refresher>
  < p *ngFor="let item of items">
    {{item}}
  < /p>
  < p>
    < ion-label fixed>Company Name< /ion-label>
    < ion-input type="text" name="company" [(ngModel)]="company">
    < /ion-input>
    < button ion-button (click)="save(company);">Add< /button>
  < /p>
< /ion-content>

Full Free Source Code: src/pages/home/home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
items: any;
  constructor(public navCtrl: NavController, public storage: Storage) {
    this.doRefresh(0);
  };
doRefresh(refresher){
    this.storage.get('myStore').then((data) => {
      this.items = data;

      if(refresher != 0)
         refresher.complete();
    }); 
};
  save(val){
    console.log('data added '+val);
    this.storage.get('myStore').then((data) => {
      if(data != null)
      {
        data.push(val);
        this.storage.set('myStore', data);
      }
      else
      {
        let array = [];
        array.push(val);
        this.storage.set('myStore', array);
      }
    });
  };
}

Here we need to call doRefresh() method inside the constructor too, without which the application will not have any data when its loaded for the first time – until the user pulls the content view and invokes doRefresh() method. To avoid such inconvenience, we call doRefresh() method inside the constructor and pass in ZERO as its parameter – this way we can bypass calling complete() method whenever the data being passed to doRefresh() method is ZERO.