Ionic 4 Refresher is not passing in the refresher object so I can't complete it

Appflow
1

When trying to complete the refresher, I’m getting the error TypeError: refresher.complete is not a function.

The refresher does call my typescript method and the spinner shows on the page. I just can’t complete it.

Has the refresher changed in V4? I couldn’t find a reference to it in the beta docs.

I have the following code:

.html:

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

.ts:

import { Refresher } from '@ionic/angular';
...
async refreshAppointments(refresher: Refresher) {
    await this.loadAppointments(this.accordionIdx);
    refresher.complete();	// Error here TypeError: refresher.complete is not a function
}
2

It has to be event.target.complete() now (as opposed to just event.complete()). I’m not sure if the proper type for the event is exported.

3

To add to rapropos’s reponse, you can also use a ViewChild to call this.

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

@ViewChild("refresherRef") refresherRef: Refresher;
...
async refreshAppointments(refresher: Refresher) {
    await this.loadAppointments(this.accordionIdx);
    this.refresherRef.complete();  // Works
}
2 Likes