# \[Ionic 4\] Get data in modal passed with componentProps

**URL:** <https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496>\
**Category:** Ionic Framework\
**Created:** [July 27, 2018, 2:54pm UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496 "2018-07-27T14:54:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![MattE](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/matte/32/66712_2.png) [@MattE](https://forum.ionicframework.com/u/MattE)\
**Post date:** [July 27, 2018, 2:54pm UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/1 "2018-07-27T14:54:55Z")

</div>

I’m trying to get the data that I pass when showing my modal;  
I can’t find how I can retrieve the data inside the modal.  
`ModalController` doesn’t have any useful options.

```auto
async openModel()
{
   const modal = await this.modalCtrl.create({
      component: ManagePage,
      componentProps: { test: 5 }
    });
    await modal.present();
}

```

How can I retrieve “5” in the modal?

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 27, 2018, 3:29pm UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/2 "2018-07-27T15:29:28Z")

</div>

didn’t tried, but, maybe, still with `NavParams` like in v3? probably not but I would try that first

---

<div class="post-metadata">

**Author:** ![MattE](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/matte/32/66712_2.png) [@MattE](https://forum.ionicframework.com/u/MattE)\
**Post date:** [July 27, 2018, 9:26pm UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/3 "2018-07-27T21:26:02Z")

</div>

Thanks man, it was indeed `NavParams`.  
I don’t know why I didn’t test it, maybe because it wasn’t in the documents?

Anyway, problem solved!

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 28, 2018, 6:04am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/4 "2018-07-28T06:04:30Z")

</div>

Awesome, thx for the feedback. I don’t have tried the Modal yet, one thing less I will not have to search 😉

---

<div class="post-metadata">

**Author:** ![chats1986](https://avatars.discourse-cdn.com/v4/letter/c/bc79bd/32.png) [@chats1986](https://forum.ionicframework.com/u/chats1986)\
**Post date:** [August 14, 2018, 11:29am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/5 "2018-08-14T11:29:17Z")

</div>

How to catch hold of the onDidDismiss() -\> like ionic 3??

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [August 14, 2018, 11:40am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/6 "2018-08-14T11:40:41Z")

</div>

> [@\[Ionic-v4\] Modal Parameters](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/2):
>
> 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.navP…

---

<div class="post-metadata">

**Author:** ![MattE](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/matte/32/66712_2.png) [@MattE](https://forum.ionicframework.com/u/MattE)\
**Post date:** [August 14, 2018, 11:46am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/7 "2018-08-14T11:46:22Z")

</div>

Like this:

```auto
// Show modal
const modal = await this.modalCtrl.create({
  component: ModalPage
});
modal.present();

// Get returned data
const { data } = await modal.onWillDismiss();

```

---

<div class="post-metadata">

**Author:** ![chats1986](https://avatars.discourse-cdn.com/v4/letter/c/bc79bd/32.png) [@chats1986](https://forum.ionicframework.com/u/chats1986)\
**Post date:** [August 18, 2018, 3:33pm UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/8 "2018-08-18T15:33:50Z")

</div>

But I am getting an error for using navaparams in home page.

At first I tried to pass the params via router from app.components.ts file

loadMagazine(){  
this.router.navigate([’’, {filterType: ‘magazine’}]);  
}

**for the above I am getting an error saying ERROR Error: Root segment cannot have matrix parameters**

and on Home page  
**ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HomePage -\> NavParams]: \*\*  
\*\* StaticInjectorError(Platform: core)[HomePage -\> NavParams]: \*\*  
\*\* NullInjectorError: No provider for NavParams!**

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [August 20, 2018, 8:28pm UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/9 "2018-08-20T20:28:15Z")

</div>

what would be the non-angular way? Just out of curiosity  
Getting navParams…

---

<div class="post-metadata">

**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:06am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/10 "2018-09-05T02:06:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 5, 2018, 5:19am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/11 "2018-09-05T05:19:52Z")

</div>

> [@Overton](#):
>
> NavParams are no longer supported in Ionic v4 - you will get a static injector error.

Not agree with that, I use beta.7 and `NavParams` and don’t get any injector error

Furthermore they are supported, see their implementation [https://github.com/ionic-team/ionic/blob/4fcab896511672795c0bdf0ecf1b5561f67b3b45/angular/src/directives/navigation/nav-params.ts](https://github.com/ionic-team/ionic/blob/4fcab896511672795c0bdf0ecf1b5561f67b3b45/angular/src/directives/navigation/nav-params.ts)

> [@Overton](#):
>
> 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.

agree with the answer of @aaronksaunders to your same post there [[Ionic-v4] Modal Parameters - #6 by aaronksaunders](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/6)`@Input` are not necessary in that case

---

<div class="post-metadata">

**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:37pm UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/12 "2018-09-05T15:37:39Z")

</div>

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().

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 5, 2018, 3:40pm UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/13 "2018-09-05T15:40:52Z")

</div>

Cool thx for the feedback 🙂

---

<div class="post-metadata">

**Author:** ![chats1986](https://avatars.discourse-cdn.com/v4/letter/c/bc79bd/32.png) [@chats1986](https://forum.ionicframework.com/u/chats1986)\
**Post date:** [September 24, 2018, 9:49am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/14 "2018-09-24T09:49:50Z")

</div>

> [@reedrichards](#):
>
> feedback

Hey David, I tried to use your solution but it errors out.

const modal: HTMLIonModalElement = this.modalController.create({  
component: MyModal,  
componentProps: {  
something: ‘value’,  
other: {couldAlsoBeAnObject: true}  
}  
});  
modal.onDidDismiss((data) =\> {  
console.log(data);  
});  
return await modal.present();

Error:

[ts] Expected 0 arguments, but got 1.

(property) Components.IonModal[‘onDidDismiss’]: () =\> Promise\<OverlayEventDetail\<any\>\>

Not sure how to fix this… can you please help!

 ![Screenshot%20from%202018-09-24%2015-15-48](https://global.discourse-cdn.com/ionicframework/original/3X/a/f/af5e132dbbacf6482ce71b7272e1a438e694d91b.png)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 24, 2018, 10:02am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/15 "2018-09-24T10:02:19Z")

</div>

has a look at your error a 2nd time 😉

`onDidDismiss` return a promise respectively doesn’t except a function as parameter

---

<div class="post-metadata">

**Author:** ![chats1986](https://avatars.discourse-cdn.com/v4/letter/c/bc79bd/32.png) [@chats1986](https://forum.ionicframework.com/u/chats1986)\
**Post date:** [September 24, 2018, 10:04am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/16 "2018-09-24T10:04:27Z")

</div>

Oh freak… I am so sorry thank you!!!

modal.onDidDismiss()  
.then((data) =\> {  
console.log(data);  
})

works… I new you would respond immediately… cheers mate…!

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 24, 2018, 10:15am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/17 "2018-09-24T10:15:29Z")

</div>

no worries, cool to hear it worked out 😉

---

<div class="post-metadata">

**Author:** ![neverender24](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/neverender24/32/122392_2.png) [@neverender24](https://forum.ionicframework.com/u/neverender24)\
**Post date:** [November 4, 2018, 2:55am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/18 "2018-11-04T02:55:01Z")

</div>

I used v4.3.0.

I got

```auto
StaticInjectorError(AppModule)[GameOverPage -> NavParams]: 
  StaticInjectorError(Platform: core)[GameOverPage -> NavParams]: 
    NullInjectorError: No provider for NavParams!
Error: StaticInjectorError(AppModule)[GameOverPage -> NavParams]: 
  StaticInjectorError(Platform: core)[GameOverPage -> NavParams]: 
    NullInjectorError: No provider for NavParams!

```

Does NavParams still work with latest beta?

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [November 4, 2018, 7:56am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/19 "2018-11-04T07:56:57Z")

</div>

First of all, Ionic v4.3.0 != Ionic Angular v4-beta.15  
Secondly, NavParams still work

---

<div class="post-metadata">

**Author:** ![be1](https://avatars.discourse-cdn.com/v4/letter/b/7ab992/32.png) [@be1](https://forum.ionicframework.com/u/be1)\
**Post date:** [November 17, 2018, 7:24am UTC](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496/20 "2018-11-17T07:24:56Z")

</div>

let distanceModal = this.modal.create(  
HoleDistancesPage,  
{  
hole : this.holeInfo,  
});  
distanceModal.onDidDismiss(  
newTarget =\> {  
if ( newTarget ) {  
this.currentCircleTarget = newTarget;  
if ( this.drawingMode !== “simulatedGPS” ) {  
this.clearCanvas();  
this.drawDistanceCircle( this.currentCircleTarget );  
}  
}  
}  
);  
distanceModal.present();

I’d like to convert to ionic v4.  
could we call onWillDismiss function as promise?  
Please help me. Thank you

[Next page](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/136496.md?page=2)