Forward Advance Learning

Pull-to-refresh

Ionic gives us a component to handle pull-to-refresh. We add it to the top of the page.

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

It will fire an event when the refresh event occurs. We can listen to the event and handle it in our controller:

import {Component} from '@angular/core';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
handleRefresh(refresh) {
// refreshing
setTimeout(() => {
// Call this to mark the refresh as complete
refresh.complete()
}, 2000);
}
constructor() {}
}

Exercise - Pull to refresh

Revisit the Flickr app we made earlier. We're going to integrate that app into Ionic.

Use your service to get pictures of cats from the flickr service. Render them on the page as an attractive cat list.

Make it so that when you pull down, we refresh the feed and show the latest cat content.