CODEWITHSUNDEEP
javascriptangularionic2
user3844198
user3844198

Reputation: 205

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

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?

Upvotes: 1

Views: 4237

Answers (3)

Zack
Zack

Reputation: 492

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.

Upvotes: 1

athulpraj
athulpraj

Reputation: 1577

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');

Upvotes: 0

m.ghadiri
m.ghadiri

Reputation: 330

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();
  }
}

Upvotes: 2

Related Questions