Pass parameters to a Modal in Ionic 4

Ionic Framework
1

In Ionic 3 I was able to pass parameters to another page that I open in a Modal and used the NavParams to retrieve the values.

Source page, that opens the Modal

  showImage(photo: ProblemPhoto): void {
    let modal = this.modalCtrl.create(
      'ImageViewerPage',
      {
        imgSrc: this.pathForImage(photo.filename)
      }
    );
    modal.present();
  }

Destination page, that is being open in a Modal

  constructor(public navCtrl: NavController, public navParams: NavParams,
    private viewCtrl: ViewController) {
    this.imgSrc = navParams.get("imgSrc");
  }

In Ionic 4 I don’t see how it can be done.

Is by passing parameters to the “componentProps” property? If so, how do I read them in the Modal?

  showImage(photo: ProblemPhoto): void {
    this.modalCtrl.create(
      {
        component: ImageViewerPage,
        componentProps: { imgSrc: this.pathForImage(photo.filename) }
      }
    ).then(modal => {
      modal.present();
    })
  }

I did not find this explained in the Migration guide from ionic 3 to ionic 4.

Thanks in advance

2 Likes
2

[Ionic-v4] Modal Parameters

1 Like