How to reload the ion-page after pop() in ionic2

Question

I have 2 pages Page1 and Page2. I have used this.nav.pop() in Page2 and it will pop the Page2 and Page1 will enable but i want to refresh the Page1. Thank you in advance.

Answer 1

I spent a day and a half on a similar issue. The solution is anti-climatic really.

I'm passing a FormGroup from Page-1 to Page-2. I update the FormGroup values in Page-2. When I pop Page-2, Page-1's form is not updated with the new values. It hasn't been watching for changes.

To fix this, I patch the FormGroup with itself after Page-2 has been popped but still in the Page-2 component.

This is more responsive, but requires a direct call to close().

// Page-2 close method
public close(): void {
    this.navCtrl.pop();
    this.formGroup.patchValue(this.formGroup.value);
}

This is all encompassing, but I do see the refresh on Page-1.

// Page-2 nav controller page event method
ionViewWillUnload() {
    this.formGroup.patchValue(this.formGroup.value);
}

Answer 2

Like Jonathan said, you can import Events from ionic-angular, but you don't need push and pop again, call your methods to reload only the content.

In page2:

this.events.publish('reloadDetails');
this.navCtrl.pop();

In page1:

this.events.subscribe('reloadDetails',() => {
    //call methods to refresh content
});

That works for me.

Answer 3

I simply load the details in page 1 in an ionViewWillEnter function (using Ionic 2). This handles both the initial load and any refresh when popping back to page 1.

Documentation is here.

ionViewWillEnter
"Runs when the page is about to enter and become the active page."

Answer 4

Ignore the direct angular implementations suggested here, especially since you are using Ionic 2 and the suggestions are assuming Ionic 1. Don't start mixing too much of direct angular in your ionic app unless there is no ionic implementation for what you need. Import "Events" from ionic/angular2 in both Page1 and Page2, then in Page2 do something like

this.events.publish('reloadPage1');
this.nav.pop();

And in Page1 put

this.events.subscribe('reloadPage1',() => {
 this.nav.pop();
 this.nav.push(Page1);
});

Answer 5

Simple solution that worked for me was calling the get service method again in ionViewDidEnter

ionViewDidEnter() {
    this.loadGetService();
}

Answer 6

I found this technique to reload a page:

this.navCtrl.insert(1, MyPage);
this.navCtrl.pop();