[Ionic 4] Get data in modal passed with componentProps

[MattE]

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?

[reedrichards]

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

[MattE]

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!

[reedrichards]

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

[chats1986]

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

[reedrichards]

[Ionic-v4] Modal Parameters

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/ 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…

[MattE]

Like this:

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

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

[chats1986]

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!

[Tommertom]

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

[Overton]

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.

[reedrichards]

@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

@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 , 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 @Input are not necessary in that case

[Overton]

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

[reedrichards]

Cool thx for the feedback

[chats1986]

@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!

[reedrichards]

has a look at your error a 2nd time

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

[chats1986]

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

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

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

[reedrichards]

no worries, cool to hear it worked out

[neverender24]

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?

[reedrichards]

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

[be1]

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