Why can't we get the modal nested component instance?

Ionic Framework Ionic Angular
1

After we create a modal with const modal = await this.modalController.create(opts) we get an HTMLIonModalElement that have a .component property.

However, this .component property is useless, it is not the new component instance. It would be great to have the instance holded by the modal, for example to subscribe to its @Outpu() properties. This can be done with the Angular Material Dialog componentInstance mechanism

I am trying so hard to get this feature without success that I am thinking that may be an anti pattern for Ionic…

For example, I tried to create a custom delegate to instanciate myself a component with angular mechanism, but that have no effects, and then I saw this issue on Github saying that is volunteer…

Can you explain me why the access to a component inside a created modal is so restricted ?

Thank you !

2

What do you want to achieve? Receive output from the modal? Use dismiss handler

Provide input? Use the props in the option?

What else is there to manage from outside of the modal?

Pending your answer you are either in a rabbithole of antipatterns - as you say. Or have some really interesting edge case

3

I would like

  • to be able to listen for some modal event without waiting for the dismiss event
  • to be able to call some method of the component instance from outside the modal

For example:

const modal = await this.modalController.create(opts)
modal.component.instance.onAction1.pipe(
   tap(result => this.someActionInBackgroundUI(result)),
).subscribe();

// Or, when an action occurs in background UI, update in Realtime my modal component:
modal.component.instance.performUpdateInMyModal()

A workaround for the first case is to provide a new EventEmitter() that has been subscribed before giving it to the componentProps param of the modalCtrl.create method. But this seems weird if other developer find my code…

4

For this I would opt to use a service with a BehaviorSubject or so

One other way is to use an inline modal instead of modalController. Then you have any of the parent child comms amgular has

Inline modals is the preferred way since Ionic 6

Wanting to “call a method of another component” is imho not an Angular way of talking

5

Yep, inline modal is the best solution coupled with a view child. Thank you !

1 Like
6

Great and welcome to the forum!

1 Like