Ionic v4 onDidDismis result which type?

Ionic Framework
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)

1 Like
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:

1 Like
4

Hi,
how can I access to properties of OverlayEventDetail?
If I return this object

  closePopover(showRoute = false, deviceId = null) {
    const dataPar = {
      showRoutePar: showRoute,
      deviceIdPar: deviceId,
      deviceLatitudePar: this.device.latitude,
      deviceLongitudePar: this.device.longitude,
    };
    this.popoverController.dismiss(dataPar);
  }

when I try to access it in this way:

    popover.onDidDismiss().then((dataPar) => {
     console.log(dataPar);
      if (dataPar.showRoutePar) {
.....
      }
      .....
    });

The command console.log shows the right data but WebStorm says to me that:
TS2339: Property showRoutePar does not exist on type OverlayEventDetail<>

How can I access to the properties of the object?

cld

5

Excuse me,
I’ve solved:

    popover.onDidDismiss().then((dataPar: OverlayEventDetail) => {
      console.log( dataPar.data);
      if (dataPar.data.showRoutePar) {
        alert(dataPar.data.deviceId);
      }
      // this.showRouteToVehicle(dataPar);
    });
1 Like
6

You can pass a type to the onDidDismiss() method. Because OverlayEventDetail.data type is generic.

modal.onDidDismiss<MyType>().then((event) => {
  console.log(event.data, 'is MyType');
})

See docs. By default it’s the dangerous type any.

1 Like