How to use Events on ionic modal with a controller

Question

i use ionic 6 on nuxt project and i want to show a modal. So i use the controller of the ionic modal (https://ionicframework.com/docs/api/modal#controller-modals).

But i don't know how i can use the events there (https://ionicframework.com/docs/api/modal#events) with the controller.

I want to use event 'ionBreakpointDidChange' to change my modal content when the breakpoints change.

This is my controller

modal = await modalController.create({
    component: Modal,
    breakpoints: [0, 0.2, 0.5, 1],
    initialBreakpoint: 0.5,
    backdropBreakpoint: 1,
    backdropDismiss: false,
  })
  modal.present()

If someone can help me it's will be perfect

I try:

• modal.addEventListener('ionBreakpointDidChange', () => {})
• modal.ionBreakpointDidChange(() => {})

Answer 1

for Ionic 4+:

modal = await modalController.create({
    component: Modal,
    breakpoints: [0, 0.2, 0.5, 1],
    initialBreakpoint: 0.5,
    backdropBreakpoint: 1,
    backdropDismiss: false,
  });
modal.ionBreakpointDidChange().then(() => {
  *what you want to happen*
});
modal.present();

But since you are using Ionic 6, I recommend you use the inline version, which is simpler and recommended by docs:

  <ion-modal [initialBreakpoint]="..." [breakpoints]="[...] (ionBreakpointDidChange)="...">
    <ng-template>
        * your modal *
    </ng-template>
  </ion-modal>

Answer 2

I spent the last few hours to find a solution for adding an event listener in Ionic 6 using Controller Modals.

The solution is to add an event listener with the event you want to the modal instance.

for anyone reading it in the future, please make sure to use kebab-case as the event name and not the camelCase event name. (just wasted a few hours figuring it out)

const modal = await modalController.create({
    component: YourComponent,
});
modal.present();
modal.addEventListener("did-present",()=>{
    console.log("did-present modal WORKS!");
});
modal.addEventListener("didPresent",()=>{
    console.log("didPresent modal WILL NOT TRIGGER");
});

my biggest mistake was to use modal.addEventListener("didPresent" ...
instead of the correct answer modal.addEventListener("did-present"... (kebab case)

so for your question then answer will be

modal.addEventListener("ion-breakpoint-did-change",()=>{...