Pass data from the ionic popover / modal back to the calling page

Question

Let’s say the user provided details in a small form (few radio buttons) on the popover/modal page, I’ll want an easy way to pass that data back to the page that called the popover/modal. I know that method dismiss exists and onDidDismiss function can be used further.

How to implement it without closing the ionic popover automatically? (change should appear just after clicking proper option)

Do we have any simple alternative to the dismiss method to pass data to the calling page?

Answer 1

you can use caller page as a parameter to the modal. then call a public method from the first page. here is the example:

export class HomePage {

  public showNumber: number;

  constructor(public navCtrl: NavController,
              public modalController: ModalController) {
    this.showNumber = 0;
  }

  public testModal(): void {
    let modal = this.modalController.create(Modal, {homePage:this});
    modal.present();
  }

  public increaseShowNumber() {
    this.showNumber += 1;
  }
}

@Component({
  selector: 'page-modal',
  template: '<button (click)="increaseCallerNumber()">Increase</button> '
})
export class Modal {
  private homePage:HomePage;
  public constructor(params: NavParams) {
    this.homePage = params.get('homePage');
  }

  public increaseCallerNumber():void{
    this.homePage.increaseShowNumber();
  }
}

Answer 2

My response may be late but I hope it will help someone in the future.

According to Ionic 3 docs, the dismiss() method can accept a parameter and also the onDismiss() method can return that data after it has dismissed the popover. Like below, on the page that's calling the popover:

  presentPopover(myEvent) {
let popover = this.popoverCtrl.create(PopOverPage);
popover.present({
  ev: myEvent,
});

popover.onDidDismiss(res => {
  console.log('Results: ', res);
});

}

and on the popover page include the parameter on the onDismiss() method

  close() {
this.viewCtrl.dismiss('Hello world');

}

and the "Results" console will return the results form the popover page.

I hope this helps in the future, for those that will still be doing Ionic 3.

Answer 3

In the modal use the following for navigation when dismissing the modal

 close() 
 {
     this.navCtrl.push(NewPage, { code: 1 });
 }

then you can get the data from new page using navparams

 import { NavParams, ......} from 'ionic-angular';
 .
 .
 .
 this.code = navParams.get('code');