CODEWITHSUNDEEP
javascriptangulartypescriptionic2ionic3
Usr
Usr

Reputation: 2848

ionic close modal and go back to previous page sending data

I'm wondering if there's a way to pass data from a modal to the previous page without using nav controller. If I use that, in fact, I push another page on the stack, and I don't want this, I just want to go back to the existing one. The problem is that if I do:

this.viewCtrl.dismiss();
this.navCtrl.pop();

inside the modal when I want to close it, it gives me an error saying that there is no page to pop.
If I didn't need to pass the data I would simply use the dismiss() method for the modal, but I need to return some data to the previous page and I don't know how to do that. Is it possible? How can I achieve this?

Upvotes: 0

Views: 2095

Answers (2)

sebaferreras
sebaferreras

Reputation: 44669

Just like you can see here you can send some data in the dismiss method and get it in the previous page (you don't need to use this.navCtrl.pop();):

 // Page A
 // ----------

 private dataFromModal: any;

 presentModal() {
   let modal = this.modalCtrl.create(ModalPage);

   modal.onWillDismiss((data) => {
     // This is going to be executed when the modal is closed, so
     // you can get the data here
     this.dataFromModal = data;
   });

   modal.present();
 }


// Page B
// ----------

let data = { 'foo': 'bar' };
this.viewCtrl.dismiss(data);

Upvotes: 3

ChesterLaborde
ChesterLaborde

Reputation: 458

You could store the data in the Storage and then on dismiss fetch the info like so:

import { Storage } from '@ionic/storage';

constructor(private navCtrl: NavController, private navParams: NavParams,
             private modalCtrl: ModalController,
              private storage: Storage) {}


openModal() {
    let modal = this.modalCtrl.create(ModalPage);
    modal.present();
    modal.onDidDismiss(data => {
        this.getInfo();
    });
}

getInfo() {
    this.storage.get("some_data").then(res => {
      if(res != null){
        this.data = res;
      }
    });
}

modal.ts

setInfo() {
    this.storage.set('some_data', data);
    this.dismiss();
}

Upvotes: 1

Related Questions