CODEWITHSUNDEEP
javascripthtmlangularionic2
Pezetter
Pezetter

Reputation: 2862

Ionic 2 Refresher toggle ion-refresher on page load

Overview:

I make a network request to fill a list when my page loads in an Ionic 2 app. At this moment I am toggling a ion-spinner when the page initially loads.This is the refresher currently:

<ion-refresher (ionRefresh)="doRefresh($event)">

  <ion-refresher-content
    pullingText="Pull to refresh..."
    refreshingSpinner="circles">
  </ion-refresher-content>

</ion-refresher>

<ion-spinner *ngIf="loading" color="light" name="circles"></ion-spinner>

My desired behavior would be to remove the ion-spinner component and just enable the ion-refresher when the page initially loads. I've seen a couple examples of this with Ionic V1, but I cant seem to translate it over to Angular 2.

Question:

Is there a way to trigger the ion-refresher and its spinner from my controller (*.ts), so I can remove the extra ion-spinner component from my template?

Upvotes: 5

Views: 2880

Answers (2)

thymythos
thymythos

Reputation: 56

I actually found a hack:

import { Content, Refresher } from 'ionic-angular';

export class MyPage {
  @ViewChild(Content) content: Content;
  @ViewChild(Refresher) refresher: Refresher;
...
  ionViewDidEnter() {
    this.refresher._top = this.content.contentTop + 'px';
    this.refresher.state = 'ready';
    this.refresher._onEnd();
  }

This will show and trigger the refresher. It implicitly calls the registered refresh function.

Upvotes: 4

Incognito
Incognito

Reputation: 133

For me you don't need ion-spinner

The doc say :

The ion-spinner component provides a variety of animated SVG spinners. Spinners enables you to give users feedback that the app is actively processing/thinking/waiting/chillin’ out, or whatever you’d like it to indicate. By default, the ion-refresher feature uses this spinner component while it's the refresher is in the refreshing state

You have an example in the doc to do it

https://ionicframework.com/docs/v2/api/components/refresher/Refresher/

Edit : So use à method get data and call it in ionViewWillEnter.See comment at this post How to dismiss Loader after data is ready

Upvotes: 0

Related Questions