Ionic v4 onDidDismis result which type?


#1

Anyone knows how to properly code/type a method like onDidDismiss in Ionic v4?
Found nothing in the doc and I’m facing errors at compiling time

v3:

presentModal() {
  const modal: Modal = this.modalCtrl.create(ModalPage);

  modal.onDidDismiss().then((result: number) => {
    console.log(result);
  });

  modal.present();

}

v4:

 async presentModal() {
   const modal: HTMLIonModalElement = await this.modalCtrl.create({
     component: ModalPage
   });
   
  modal.onDidDismiss().then((result: number) => { // <-- Leads to a bundle ERROR
    console.log(result);
  });
  
  return await modal.present();
}

ERROR:

error TS2322: Type 'OverlayEventDetail<any>' is not assignable to type 'number'

I then tried to use OverlayEventDetail instead of number respectivelly

 import {OverlayEventDetail} from '@ionic/angular/dist/types/utils/overlays';
 
 modal.onDidDismiss().then((detail: OverlayEventDetail) => {
    console.log(detail.data.result);
  });

but this lead to another error while bundling

ERROR in node_modules/@ionic/angular/dist/types/utils/overlays.d.ts(1,30): error TS2307: Cannot find module '../stencil.core'.
[ng] node_modules/@ionic/angular/dist/types/utils/overlays.d.ts(2,59): error TS2307: Cannot find module '../interface'.

#2

onDidDismiss returns a promise, so you would set it up something like this:

modal.onDidDismiss().then((detail: OverlayEventDetail) => {

});

If you want to include the OverlayEventDetail type you can import it from @ionic/core (it isn’t required, though)


#3

thx a lot! that’s the tricks, Webstorm imports automatically OverlayEventDetail from

 import {OverlayEventDetail} from '@ionic/angular/dist/types/utils/overlays';

which breaks at bundle time. using

 import {OverlayEventDetail} from '@ionic/core'; 

do compile :slight_smile: