Ionic Refresher

Refreshing means updating of the currently displayed page so that the user can see the latest content. It is also called as re-loading in the web terminology.

In many Android applications, we have seen a user-friendly feature pull-to-refresh. This feature allows a user to pull or drag a page down to some limit, and then the current page view is automatically got a refresh. The pull-to-refresh pattern eliminates any need to tap or click somewhere.

Ionic provides the same by using <ion-refresher> component to add a pull-down feature. The <ion-refresher> component provides pull-to-refresh functionality on a content component. An Ionic allows a user to use this pattern on a list of data using touch to retrieve more data. The updated data should be modified during the refresher's output events. Once, the refreshing of page ends, call the complete() function on the refresher.

<Ion-refresher-content>

It is a sub-component of <ion-refresher> component, which contains text, icon, and refresher to display during a pull-to-refresh. An Ionic provides different pulling icons and refreshing spinner icons for different platforms. This component contains the following properties:

• pullingIcon
• pullingText
• refreshingSpinner
• refreshingText

The following example explains how refreshing works in the Ionic application.

Example

Home.page.html

In this HTML file, we need to add <ion-refresher> component where we call the Refresh event. Inside this component, add the <ion-refresher-content> sub-component which contains the custom refresher properties.

Home.page.ts

This page is responsible for handling the event, which was used in the component of the HTML file.

Output:

When you execute the app, you will get the output. Then, pull down or drag the pointer in the content area, the following screen appears.

Custom Refresher Properties

This example explains the use of custom properties such as pullFactor, pullMin, and pullMax. If the pullFactor is less than 1, pull down animation is slow. If it is greater than 1, pull-down speed is up. Its default value is 1, which is equal to the cursor speed. The pullMax and pullMin set the maximum and minimum distance of the pull until the refresher will go into the refreshing state.

Example

Home.page.html

Home.page.ts

This page handles the event that occurs in the refresher component. Here, we are going to set the time for the pull-to-refresh, which disappears the spinner loading icon after the time is completed.

Output:

When you execute the app, it will give the following output.

Now, pull down or drag the pointer in the content area, the following screen appears. Here, you will find the latest updates of the page view.