How to pass navParams from child page to parent

Ionic Framework ionic-v3
1

I know how to pass parameters from a parent page to a Child. But what I need is to pass parameters from a child page back to the parent. I cannot use this.nav.push because I will end up with 2 parent pages in the stack. Instead I just want to go back to the parent page and pass a parameter

Does something like this exist?

goBack() {
    this.nav.pop(ParentPage, {
        firstname: "John",
        last-name: "Snow"
    });
}
1 Like
2

AFAIK it is not directly possible but you can use a service class as a workaround. You could also consider using a modal page instead, then you can pass the parameters using the dismiss() method of ViewController. Or you could open a new feature request.

3

@iignatov Thank you so much for pointing me in the right direction :+1:
A modal page works fine and I’m able to pass the parameters using the dismiss() method but it’s not the feel I want in my app. I implemented a service class based on the article you suggested and it works like a charm. However, I feel it’s an overkill for simple needs like this. I will submit a new feature request as I think it would be helpful in a lot of use cases.

1 Like
4

I submitted a new feature request

5

I’m glad I could help.

I agree that there is a room for improvement in this case.

:+1:

6

Is passing parameters using the dismiss method documented for Ionic 2 yet? I’m keen to give this a try but not entirely sure how to pass and retrieve the params. I assumed something like:

// Modal
this.viewCtrl.dismiss({
    test: 'hello'
});

// Page
onPageWillEnter() {
    this.viewCtrl.get('test');
}

Sorry, I know thats wrong but I assume it’s similar to the navparams?

Thanks

7

@lawlesscreation here’s an example

// Modal - ChangeEmailPage

changeEmail(user) {
    this.dismiss(user);
}

// Page

private modalChangeEmail() {
    let modal = Modal.create(ChangeEmailPage);
    this.nav.present(modal);
    modal.onDismiss((data: any[]) => {
      if (data) {
        this.doChangeEmail(data);
      }
    });
  }

Full code here

2 Likes
8

It seems that it’s not available in the docs yet, but you can take a look at the example by @gigocabrera to see how to achieve this.

9

Hi

My problem is I can’t get google maps to load into a modal, so am using a normal Component as the child page which suits my requirements. However, if I use the service method, when I do you go back to the parent, do you use this.nav.pop? If so, how do you get the parent to reload (i.e. call a function) and not just present itself. I need the parent page to reload with the new parameters.

I can get this to work, but how do I pick up the parameters in the root page and reload the page?

let options = {
param1: true
};
this.nav.popToRoot(options);

I can’t seem to get it to call any of the parents lifecycle hooks (e.g. ngOnInit). Is this not possible?

Thanks

10

You really save my day! thank you