Ionic Refresher

Ionic Refresher

Refresher means updating the currently showing page so that the user can see the latest view. It is also known as re-loading in web technology.

It provides a pull- to-refresh feature on a content component. The pull-to-refresh feature allows the user to pull or drag a page down to some limit, and then the current page view is automatically got a refresh. The Ionic permits you to use this pattern on a list of data using touch to get more data.

Ionic provides the <ion-refresher> component to add a pull-down feature. The <ion-refresher> component gives pull-to-refresh feature on a content component. The data should be modified through refresher’s output events. Once the refresher of pages end, then call the complete() method.

Ionic Refresher Content

The ionic refresher content is the child component of the <ion-refresher> component that includes the text, icon, and spinner to show during a pull-to-refresh. The ionic gives the pulling icon and the refreshing spinner based on the various platforms. There are many properties used in the ionic refresher content that are as follows:

pullingIcon
pullingText
refreshingSpinner
refreshingText

Example: This example explains how you can use the refresher in the ionic application.

Home.page.html

Here, you are required to add the <ion-refresher> component where you call the refresh event. To contain the custom properties, you need to add the <ion-refresher-content> component inside the <ion-refresher> component.

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Ionic Refresher</ion-title>  
   </ion-toolbar>  
 </ion-header>   
 <ion-content class="ion-padding" color="light">  
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">  
     <ion-refresher-content  
     pullingIcon="arrow-down"  
     pullingText="Pull to refresh"  
     refreshingSpinner="bubbles"  
     refreshingText="Refreshing....."></ion-refresher-content>  
   </ion-refresher>  
 </ion-content>

Home.page.ts

import { Component } from
'@angular/core';  
 @Component({  
   selector: 'app-home',  
   templateUrl: 'home.page.html',  
   styleUrls: ['home.page.scss'],  
 })  
 export class HomePage {   
   constructor() { }  
   doRefresh(event) {  
     console.log('Pull Event Triggered!');  
   }  
 }

Output: After executing this code, you will get the output, as shown below:

If you scroll down then, it starts refreshing, as shown below:

Refresher Progress

The refresher progress used the number of values to set the refresher. The number shows how far down the user has pulled the refresher. If the number is 0, then it displays the user has not pulled down the refresher. If the number is one or greater than 1, then it represents that the user has pulled far down the refresher. If the number is less than 1, then the content will return in its actual position.

Example: This example explains how you can use the refresher progress in the ionic application.

Home.page.html

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Ionic Refresher Example</ion-title>  
   </ion-toolbar>  
 </ion-header>  
 <ion-content class="ion-padding" color="light">  
   <h1>Pull to Refresh</h1>  
   <ion-refresher slot ="fixed" disabled="false" (ionRefresh)="doRefresh($event)" pullFactor="0.5" pullMin="100" pullMax="200">  
     <ion-refresher-content  
     pullingIcon="arrow-down"  
     pullingText="Pull to refresh"  
     refreshingSpinner="bubbles"  
     refreshingText="Refreshing....."></ion-refresher-content>   
   </ion-refresher>  
   <ion-list>    
     <ion-item *ngFor="let item of dummyList; let i=index">    
       Item {{ i+1 }}  
     </ion-item>    
   </ion-list>  
 </ion-content>

Home.page.ts

import { Component } from
'@angular/core';  
 @Component({  
   selector: 'app-home',  
   templateUrl: 'home.page.html',  
   styleUrls: ['home.page.scss'],  
 })  
 export class HomePage {   
   constructor() { }  
   doRefresh(event) {  
     console.log('Pull Event Triggered!');  
     setTimeout(() => {
       this.dummyList = Array(5);
       event.target.complete();
     }, 1500); 
   }  
 }

Output: After executing this code you will get the output, which is shown below:

Here, pull down or drag the pointer in the content area, then the following screen comes. After scrolling or drag down the pointer, it refreshes the current page and display the new content on the screen.

← Prev Next →