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

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 2

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 3

ionViewWillEnter() {
    this.refresh();
}

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

Answer 4

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

Answer 5

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 6

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 :)