Events with modalController

Ionic Framework
1

Hi,

I’m using modalController to display a modal.

   async openModal() {
      const modal = await modalController.create({
        component: Modal,
        breakpoints: [0.75],
        initialBreakpoint: 0.75,
      });
      modal.present();
    },

However, I cannot find a way to use events like ionModalDidPresent that can be used when rendering the modal without modalController.

Is there a way to do that?

Thanks

2

Hi
depends on the framework you are using

See for instance this angular code snipped that binds the willDismiss event of the DOM component (inline modal):

<ion-modal trigger=“open-modal” (willDismiss)=“onWillDismiss($event)”>

The API docs show these examples per framework (Inline modals)- ion-modal: Ionic Mobile App Custom Modal API Component

3

I did see the examples for inline modals. My issue is with modalController, so it’s not similar to inline modals. I’m using Ionic with Vue

4

Well, you did say " However, I cannot find a way to use events like ionModalDidPresent that can be used when rendering the modal without modalController." - so that is confusing me a bit.

The documentation on Vue also says how to use this in a controller fashion.

const { data, role } = await modal.onWillDismiss();

What does not work for you?

5

Sorry, you’re right, I wrote my question in a confusing manner :sweat_smile: My english failed me.

I meant that some of the events usable when rendering a modal inline do not seem to be usable with modalController. Documentation does mention onWillDismiss to be usable with modalController, but I’m interested in ionModalDidPresent. I couldn’t get it to work.

6

Maybe you can share piece of code that does NOT work, so people can take a look at it. I am not a Vue person, so maybe others will help

And maybe add the Vue tag to the topic. That may trigger the right eyes

7

Using the examples from the docs: ion-modal: Ionic Mobile App Custom Modal API Component

If you await the present method, it is equivalent to ionModalDidPresent.

e.g.:

const modal = await modalController.create({
  component: Modal,
});

await modal.present();

// Code that is execute after the modal is presented

We only support the shorthand method syntax for a small subset of the available events: ionic-framework/modal.tsx at c0f4381745bb0e373e8a1833756fd3f2a49dbf4a · ionic-team/ionic-framework · GitHub