Passing data back from nav.pop()

Just looking for best practice for sending data from a child route, back up to its parent. For example, if I have a list view and I want to add an item which is complex enough to merit its own page, how do I get that added item back to the list view? Now obviously I could just re-fetch the entire list but that seems kind of silly and not efficient. I found that I can also pass a “callback function” in the nav params when pushing the AddPage onto the nav stack, but that also felt wrong (though I like it better than the first option). It’d be great if I could pass the data back through the nav.pop() method, but what is the recommended way to do what I need to do?

1 Like

I use the solution of @aaronksaunders, passing a callback function, described in following tickets and it works like a charm

@Jeffroylance added to the Ionic list the idea to have the possibility to pass params to nav.pop

http://ideas.ionic.io/idea/71

hi, reedrichards, can you share an example of how you implement the callback function? i can’t really figure it out… thanks you in advance.

I also like to know how you achieved…

Will be thankful if possible can you share an example?

I did nothing else than the solution provided by @Jeffroylance in the post I listed above…

Gonna copy his answer here:

myCallbackFunction = (_params) => {
 return new Promise((resolve, reject) => {
     this.test = _params;
     resolve();
 });
}

// push page...
functionToBeClicked() {
    this.navController.push(OtherPageComponent, {
        callback: this.myCallbackFunction;
    });
}

and in the other page (in this example would be “OtherPageComponent”)

 ionViewWillEnter() {
      this.callback = this.navParams.get("callback")
 }

 ionViewWillLeave() {
    this.callback(param).then(()=>{
       this.navController.pop();
   });
}
8 Likes

Thanks for the reply, it will be great if you can share your code of the application where apply this callback function :slight_smile:
Because I am new to Ionic2, hope to have some sample code on how to apply the function.

1 Like

Actually don’t have in my code anymore :wink:

But I edited the code above, adding some more details. Let me knows if you’ve got more questions.

Alright, that’s ok, thanks again for your kindness to help.
I’ll try it out later, any problems I’ll come back to you. :grin:

1 Like

This is almost right. you need to bind the context to the callback fn though:

edit() {
    this.nav.push(EditPage, {item: this.item, callback: this.updateItem.bind(this)});
}

Actually in my case, if I remember correctly, I didn’t had to pass the context to the function. But you are right in the example above “this.” before “myCallbackFunction” was missing. I edited the solution like this:

// push page...
functionToBeClicked() {
    this.navController.push(OtherPageComponent, {
        callback: this.myCallbackFunction;
   });
}
1 Like

Yeah in my case I needed to reference the this belonging to functionToBeClicked() in order to access the class dependencies.

Coolio, good to know in case I would face problems accessing some stuffs from there :wink:

Wanted to share what I just found on Stack Overflow

So you can basically just grab from the NavStack and update the data directly

I think that falls squarely within the domain of “just because you can doesn’t mean you should”.

So what would be the correct way to do it?
Currently the methods I am aware of are:

  • Update the NavStack directly
  • Use Events
  • Use a callback Function

I get error, callback is not a function, how to tackle this

without displaying your code I can’t tell

Hi @jeneser. Though it is very late, I believe my solution will be useful and very simple. Even I had faced situations where I need to pass a variable from child to parent component or making a variable globally accessible. In these scenarios generally people go with the local storage approach, which is a space consumer and also you need take care of additional overhead of deleting the variables from local storage after their usage is done.

  • My solution is create a service you can name it as sharedvaribles.ts.

  • And import it on app.module.ts and add it to the providers.

  • Declare any variables that you want to pass bw child and parent or variables that you want access throughout the app there.

  • You can access them in any of the component by importing sharedvariable.ts and creating a variable of that type in constructor.

  • Say varible name sharedVarible and you have created variable named user_email in sharedVarible.ts. Then you can access it via this.sharedVarible.useremail. Changing it on component will reflect on another, as there is a single instance of sharedvarible class.

it is not working in ionic 4 ? how can i use these type of things in ionic 4

I think this is a great approach. Would like to see a working sample of this.

Anyway is there an established way on how to do this now?