How to use Events on ionic modal with a controller-CodePudding

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(() => {})

CodePudding user response：

Iam not sure but Try to call this from the same method were you created your modal from:

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

CodePudding user response：

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>