[Ionic 4] Get data in modal passed with componentProps


#1

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.

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

How can I retrieve “5” in the modal?


How to get parameters in modal.page.ts in ionic-v4
#2

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


#3

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!


#4

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


#5

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


#6

#7

Like this:

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

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

#8

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!


#9

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


#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, and then you’ll be able to access the passed in value in your Component’s ngOnInit method.


[Ionic-v4] Modal Parameters
#11

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

agree with the answer of @aaronksaunders to your same post there [Ionic-v4] Modal Parameters @Input are not necessary in that case


#12

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


#13

Cool thx for the feedback :slight_smile:


#14

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!


#15

has a look at your error a 2nd time :wink:

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


#16

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

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

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


#17

no worries, cool to hear it worked out :wink:


#18

I used v4.3.0.

I got

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?


#19

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


#20

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