Table of Contents

URL: https://www.progressiverobot.com/ionic-refresher-ionic/

Ionic 2 comes with a <^>ion-refresher<^> component that makes it easy to implement a pulldown to refresh functionality in your apps:

In your template, add the following right after the opening <^><ion-content><^> tag:

				
					
&lt;ion-refresher (ionRefresh)="doRefresh($event)"&gt;

  &lt;ion-refresher-content&gt;&lt;/ion-refresher-content&gt;

&lt;/ion-refresher&gt;

That alone is enough to take care of the UI for the refresher.

Now here's an example of how you'd implement the <^>doRefresh()<^> method in your component class, calling the <^>complete()<^> method on the refresher once the refreshed content has been retrieved:

				
					
doRefresh(refresher) {

  this.someService.getPosts().subscribe(res =&gt; {

    this.posts = res;

    refresher.complete();

  });

}

In this case, <^>someService<^> would be a service that's been injected in the component.