ionic2 Refresher dose not show the pullingIcon and refreshingIcon

i’m working on and angularjs2/ionic2 mobile app , and i need to integrate the refresher to make a pull to refresh from this tutorial
http://ionicframework.com/docs/v2/api/components/scroll/Refresher/
the refresher works fine but i cant get the icons to show’s up ? here is my code :

<ion-refresher (starting)="doStarting()"
             (refresh)="doRefresh($event, refresher)"
             (pulling)="doPulling($event, amt)" 
              pullingIcon="arrow-round-down"
</ion-refresher>

can any one help me ?

Hi @hatimane,

Did you find a solution? I have the same issue.

Also, have you tried to add pullingText, for example? With alpha49, the text is always shown even if I did not start to pull to refresh.

i still have the same error , and also i get the same thing for the text

Experiencing the same error. Any news on this?

With Beta 3, you should be able to make it work.

The only issue that you will see, and I hope it will be fixed in beta 4, is this here

I still have the same issue with beta3. Anyone experiencing the same thing?

Here how looks my code

html

<ion-content>
  <ion-refresher (start)="doStarting()"
                 (refresh)="doRefresh($event, refresher)"
                 (pulling)="doPulling($event, amt)">               
    <ion-refresher-content 
      pullingIcon="arrow-down"
      pullingText="{{ 'PULL_TO_REFRESH' | translate }}"
      refreshingSpinner="circles"
      refreshingText="{{ 'REFRESHING' | translate }}">
    </ion-refresher-content>                    
  </ion-refresher>

...
</ion-content>

Typescript

  doRefresh(refresher) {
    console.log('Refreshing!', refresher);

    this.refresh().then((success) => refresher.complete(), (error)=> refresher.complete());
  }
2 Likes

I have the same issue using the code from ionic docs:

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

On IOS the icon does not appear. On Android/Web a black bordered square appears and rotates. Looks like it is not able to load the icons for some reason. I also tried different icons.
Someone solved this?

see if you have put a background-color to your ion-content ( or whatever the wrapper to your ion-refresher ). if so remove the background-color and try.

Also make sure your ion-refresher is not wrapped by a *ngIf, according to ionic docs it doesn’t work properly within a *ngIf :slight_smile:

Blockquote Note: Do not wrap the ion-refresher in a *ngIf . It will not render properly this way. Please use the enabled property instead to display or hide the refresher.