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

you could pass the parent page along with the nav push. that way you could accces the parent page as a navParamter.
in parent page:

 goToChildPage() {
    this.navCtrl.push(ChildPage, { "parentPage": this });
 }

and in the child page before pop you could call functions on parent page

this.navParams.get("parentPage").someFnToUpdateParent();
  //or
this.navParams.get("parentPage").someFnToRefreshParent();

Answer 2

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 3

You may want to implement one of these in your page:

ionViewWillEnter ionViewDidEnter

Please review the navController and page lifecycle documentation: http://ionicframework.com/docs/v2/api/components/nav/NavController/

Answer 4

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

ionViewDidEnter() {
    this.loadGetService();
}

Answer 5

On PAGE 1:

import { Events } from 'ionic-angular'
constructor(public events:Events){
   this.listenEvents();
}
... ...
listenEvents(){
   this.events.subscribe('reloadDetails',() => {
    //call methods to refresh content
   });
}

On PAGE 2:

import { Events } from 'ionic-angular'
constructor(public events:Events, public navCtrl:NavController){
}

function(){
   this.events.publish('reloadDetails');
   this.navCtrl.pop();
}

Answer 6

You may consider send an event before call this.nav.pop to let page 1 reload itself.

Answer 7

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 8

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 9

I found this technique to reload a page:

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

Answer 10

I had the same problem and spend many hours searching and trying the solution.

If I understand, your problem is:

Page 1 have some bindings that you get from an API / Webservice.

Page 2 have some inputs and when pushing the back button (pop) you want to SAVE data + refresh the Page 1 bindings.

The way I solved it has been reading a post on StackOverflow that now I can't find :( !!

The solution is using an Injectable Service.

PAGE 1:

/* IMPORTS */

import { App, Nav, NavParams } from 'ionic-angular';
import { Oportunidades } from '../../services/oportunidades.service';

/* SOME BINDINGS HERE */ 
{{oportunidades.mesActual.num_testdrive}}

/* CONSTRUCTOR */
  constructor(
    private oportunidades: Oportunidades, // my injectable service!
    public app: App,
    public nav: Nav,
    public params: NavParams
  ) {

// Call to the Injectable Service (named oportunidades):
    this.oportunidades.getOportunidades();
  }

INJECTABLE SERVICE:

/* IMPORTS */ 
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class Oportunidades {

  public url = 'http://your-API.URL';
  public data: Observable<Object>;
  public mesActual: Object = [];

  constructor(private http: Http){
    //GET API DATA
    this.data = http.get(this.url).map(res => res.json());
  }

  getOportunidades() {
    this.data.subscribe(data => {
      this.mesActual = new MesActual(
        data["mes_actual_slide"].num_testdrive,
        ...
        //Here I get the API data and set it on my injectable object
      );
    });
  }
}

PAGE 2:

/* SOME IMPORTS */
import { NavController } from 'ionic-angular';
import { UserData } from '../../services/data.service';
import { Oportunidades } from '../../services/oportunidades.service';
import { Http, Headers, URLSearchParams } from '@angular/http';

/* SOME example BINDINGS and INPUTS: */
@Component({
  template: `
  {{ day[selectedDay].dia }}
    Input data: 
    <ion-input type="number" clearOnEdit="true"
      #ventas id="ventas" value={{day[selectedDay].ventas}}
      (keyup)="setVal(ventas.value, $event)">
    </ion-input>
  `,
  providers: [
  ]
})

export class PageInsert {

  constructor(
    public navCtrl: NavController,
    private http: Http,
    private userData: UserData,
    public oportunidades: Oportunidades // my injectable service!
  ) {

    send(selectedDay){
      var url = 'http://your.api.url/senddata';

      // I SAVE data TO API / Webservice
      this.http.post(url, params, { headers: headers })
      .map(res => res.json())
      .subscribe(
        data => { 
          console.log(data); 
          // Here i'll call to the Injectable service so It refresh's the new data on Page1 
         // in my case, this send function is called when "pop" or "back" button of ionic2 is pressed
         // This means: On click on back button -> Save and refresh data of the Injectable that is binded with the Page1
          this.oportunidades.getOportunidades(); 
          return true; },
        error => { 
          console.error("Error saving!"); 
        }
       );
    }
}

I hope it can help you!! Ask for any similar problems :)

Answer 11

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 12

In some situations instead of pop() you can use the push() function. When you enter the page with the push() function it is reloaded. Also you can remove page2 from the navigation.

 this.navCtrl.push(TabsPage).then(() => {
   const index = this.viewCtrl.index;
   this.navCtrl.remove(index);
   });

Or if you have more than one page for example page1->page2->pag3:

this.navCtrl.push(TabsPage).then(() => {
const index = this.viewCtrl.index;
this.navCtrl.remove(index, 2); //this will remove page3 and page2
});

Answer 13

ionViewWillEnter() {
    this.refresh();
}

ionViewWillEnter will be called just before any time you (re)visualize the page

Answer 14

Please checkout my solution, which I've posted here:

• https://forum.ionicframework.com/t/ionviewdidenter-is-not-invoked-on-leaving-a-pushed-page/131144/19?u=unkn0wn0x

Maybe you can adapt it to your needs.

The main point of my intention was to prevent, passing a whole module with this as a navCtrlParam into the push()'ed page, like it was mentioned in some comments before.

Hope it helps!

Cheers
Unkn0wn0x