# \[Ionic-v4\] Modal Parameters **URL:** \ **Category:** Ionic Framework\ **Created:** [August 3, 2018, 9:01pm UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326 "2018-08-03T21:01:00Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![patrick\_schnell](https://avatars.discourse-cdn.com/v4/letter/p/f19dbf/32.png) [@patrick\_schnell](https://forum.ionicframework.com/u/patrick_schnell)\ **Post date:** [August 3, 2018, 9:01pm UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/1 "2018-08-03T21:01:00Z")
Hey Guys, i updated my app to Ionic 4 and noticed, that there is no documented way to open a new modal-dialog with some sort of parameters. The only parameters, which i can use are the ones at the dismiss()-call. The ModalController allows to use a property “componentProps”, when creating a new modal. But i can’t access the properties in my modal component itself. Is this a missing piece in Ionic 4 or just not documented? Thanks! Kind regards Patrick ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [August 4, 2018, 5:49am UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/2 "2018-08-04T05:49:01Z")
Did you try `NavParams` in your modal to get the params? [https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/) As far I understand it works like following To pass parameters to the modal, use `componentProps` ``` const modal: HTMLIonModalElement = this.modalController.create({ component: MyModal, componentProps: { something: 'value', other: {couldAlsoBeAnObject: true} } }); ``` To get the values in your modal ``` const something: string = this.navParams.get('something'); ``` To close the modal and pass a value back ``` this.modalController.dismiss(true); ``` or ``` this.modalController.dismiss({couldAlsoBeAnObject: true}); ``` Finally to get the dismissed value back ``` modal.onDidDismiss((detail: OverlayEventDetail) => { console.log(detail ? detail.data : null); // The value or object is detail.data }); ``` ---
**Author:** ![patrick\_schnell](https://avatars.discourse-cdn.com/v4/letter/p/f19dbf/32.png) [@patrick\_schnell](https://forum.ionicframework.com/u/patrick_schnell)\ **Post date:** [August 4, 2018, 9:32am UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/3 "2018-08-04T09:32:06Z")
Thanks! That worked, i didn’t know, that NavParams exists in v4, as the complete navigation-pattern was implemented with Angular Router. ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [August 4, 2018, 9:45am UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/4 "2018-08-04T09:45:12Z")
Agree with you, not that obvious. Cool if it worked out ---
**Author:** ![Overton](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/overton/32/100440_2.png) [@Overton](https://forum.ionicframework.com/u/Overton)\ **Post date:** [September 5, 2018, 2:09am UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/5 "2018-09-05T02:09:18Z")
Are you sure this works, and that you’re using Ionic v4? I ask because NavParams are no longer supported in Ionic v4 - you will get a static injector error. > [@\[Ionic 4\] Get data in modal passed with componentProps](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/10): > > NavParams are no longer supported in Ionic v4 - you will get a static injector error. In your receiving Component, you need to use the @Input annotation on the variable name, as described in this post: [https://stackoverflow.com/questions/52012447/ionic-4-how-to-retrieve-data-passed-to-a-modal](https://stackoverflow.com/questions/52012447/ionic-4-how-to-retrieve-data-passed-to-a-modal), and then you’ll be able to access the passed in value in your Component’s ngOnInit method. ---
**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\ **Post date:** [September 5, 2018, 4:34am UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/6 "2018-09-05T04:34:47Z")
you don’t need to use the `@Input` annotation and the data still comes through as properties. i just went through this issue… the documentation is still a work in progress ---
**Author:** ![Overton](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/overton/32/100440_2.png) [@Overton](https://forum.ionicframework.com/u/Overton)\ **Post date:** [September 5, 2018, 3:38pm UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/7 "2018-09-05T15:38:14Z")
I stand corrected! It looks like both are valid ways to retrieve parameters. (Odd that there’s no documentation page for it, however, or for NavController.) The static injector error I was getting was a red herring - I believe related to issues setting up the owning module. Note that if you use NavParams, the values will be available in the constructor, versus if you use the @Input attribute, you’ll have to wait for ngAfterViewInit(). ---
**Author:** ![germandap](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/germandap/32/124093_2.png) [@germandap](https://forum.ionicframework.com/u/germandap)\ **Post date:** [February 8, 2019, 4:47pm UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/8 "2019-02-08T16:47:18Z")
Now to get the dismissed value back is: ```auto modal.onDidDismiss().then( (detail) => console.log(detail.data)) .catch( (err) => console.log(err.message); ``` The value or object is detail.data Now the function “onDidDismiss” is a promise ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [February 8, 2019, 5:35pm UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/9 "2019-02-08T17:35:30Z")
Yep, I even wrote an article about it in the meantime: [https://medium.com/@david.dalbusco/how-to-declare-and-use-modals-in-ionic-v4-4d3f42ac30a3](https://medium.com/@david.dalbusco/how-to-declare-and-use-modals-in-ionic-v4-4d3f42ac30a3) ---
**Author:** ![wekas](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wekas/32/124745_2.png) [@wekas](https://forum.ionicframework.com/u/wekas)\ **Post date:** [March 21, 2019, 9:58pm UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/10 "2019-03-21T21:58:19Z")
Saved my bacon again! I just subscribed to your medium posts. > [@Ion-img only showing randomly - component init issue (hopefully easy fix)](https://forum.ionicframework.com/t/ion-img-only-showing-randomly-component-init-issue-hopefully-easy-fix/159520/2): > > Fixed using the NavParams solution here: [https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/9?u=wekas](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/9) The code below works 100% of the time: export class ViewImageComponent implements OnInit { @Input() imageDataUrl: string; imageDataUrl2: string; constructor(private modalCtrl: ModalController, private navParams: NavParams) { } ngOnInit() { } ionViewWillEnter() { this.imageDataUrl2 = this.navParams.get('imageDataUrl'); } onCloseModal() { … ---
**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\ **Post date:** [March 22, 2019, 5:32am UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/11 "2019-03-22T05:32:16Z")
> [@wekas](#): > > Saved my bacon again! Haha I didn’t know the expression “saved my bacon”, love it 🤣 Nice to hear my little blog post was able to help, really cool. Thx for the nice feedback 🙂 ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 19, 2021, 9:26pm UTC](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/12 "2021-07-19T21:26:10Z")
Closed on July 19, 2021, 9:26pm UTC