# Pull to refresh

## What is Pull-to-refresh

The pull-to-refresh pattern lets a user **pull down** on a list of data using touch in order to retrieve more data. This is usually implemented in apps where even few seconds of idle time can allow more data to pile up in a feed list, like in Instagram or Facebook. 

This functionality is similar to hitting a refresh button, while still able to see already fetched data. 

### Difference from Infinite scroll

While Infinite scroll allows you to fetch more "older" data in your feed, pull-to-refresh allows you to fetch "newer" data in the feed, and add it to the visible feed.

![Pull the list down to fetch newer data](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LakYVqKlYbVeandSYBf%2F-LakZOPNc_5-TdA6cRBS%2FScreen%20Shot%202019-03-24%20at%2010.07.01%20PM.png?alt=media\&token=cf0853af-7cc7-4456-9e47-879232254c14)

### Pull-to-refresh in Full App

The infinite scroll is located in `src/app/pages/addons/refresh` 

To use this functionality, you put the `ion-refresher` at the top of `ion-content`in your page

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

`ion-refresher-content` contains the elements which will show when the page is loading new content. You can put text, images or GIFs here as per your app design.&#x20;

### Loading new data

`(ionRefresh)="doRefresh($event)"` is basically an `ionRefresh` listener implemented, which fires on a **pull-down and release** event of the page. It then calls a function `doRefresh` (or any function you want), and you can implement the proper logic to fetch more data.&#x20;

In Full App, we fetch more data from an API, with 5000ms delay

```
doRefresh(event) {
    if (this.loadedData.length > 10) {
      setTimeout(() => {
        this.util.presentToast('No new data available', true, 'top', 1500);
        event.target.complete();
      }, 1000)
    } else {
      this.util.getApiResponse().subscribe(data => {
        console.log(data);
        const result = data['result'];
        result.forEach(element => {
          this.loadedData.unshift(element)
        });
        console.log('Async operation has ended');
        event.target.complete();
      })
    }
  }
```

`event.target.complete();` tells the app that loading new data is completed, and the loader can be hidden. This will require a custom logic on your end. For demo purpose, we stop fetching new data when the list item count exceeds 10.

![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LakYVqKlYbVeandSYBf%2F-LakaT7wDo6wFvuZS0os%2FScreen%20Shot%202019-03-24%20at%2010.15.19%20PM.png?alt=media\&token=28716f38-7ec8-4956-81a0-d12f6dbd160b)

### Other Events <a href="#events" id="events"></a>

| Name         | Description                                                                                                                                                                                                                                                                        |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ionPull`    | Emitted while the user is pulling down the content and exposing the refresher.                                                                                                                                                                                                     |
| `ionRefresh` | Emitted when the user lets go of the content and has pulled down further than the \`pullMin\` or pulls the content down and exceeds the pullMax. Updates the refresher state to \`refreshing\`. The \`complete()\` method should be called when the async operation has completed. |
| `ionStart`   | Emitted when the user begins to start pulling down.                                                                                                                                                                                                                                |