Ionic-framework: Not able to import HTMLIonModalElement - ionic v4

[narendrasinghrathore]

I am using vs code.

Trying to import HTMLIonModalElement, but found out it's not been exported.

I am trying to return modal from invoked function but not able to set return type.

async addTodoDialog(todoItem?: Todo): Promise<HTMLIonModalElement> {
    const modal = await this.modalController.create({
      component: AddTodoComponent,
      componentProps: { todoItem }
    });
    await modal.present();
    return modal;
  }

Getting error

ReferenceError: HTMLIonModalElement is not defined

I already found this issue opened earlier, but can we have any alternate solution to this.
https://github.com/ionic-team/ionic/issues/14784

@peterpeterparker Do you have any resolution to this ?

Regards

[peterpeterparker]

Don't import it ;)

async addTodoDialog(todoItem?: Todo) {
    const modal = await this.modalController.create({
      component: AddTodoComponent,
      componentProps: todoItem
    });
    await modal.present();
  }

[narendrasinghrathore]

@peterpeterparker
Can we call onDidDismiss from that instance ?

I am trying to get returned data on onDidDismiss event from the component that invokes.

[peterpeterparker]

You should open a question on the Ionic forum for support request

[duyetnk]

Hope this help:

this.modalCtrl.create({
component: CountrySelectPage,
mode: "ios",
}).then((modal) => {
modal.onDidDismiss().then((res) => {
if(res.data){
this.phoneCode = res.data.code;
this.countryName = res.data.name;
}
});
modal.present();
});

[narendrasinghrathore]

I tried with this and working now, not sure in future.

In service

async addTodoDialog(todoItem?: Todo): Promise<HTMLIonModalElement> {
    const modal = await this.modalController.create({
      component: AddTodoComponent,
      componentProps: { todoItem }
    });
    await modal.present();
    return modal;
  }

And in component

async addTodo() {
    const modal =  await this.shared.addTodoDialog();
    const data = await modal.onDidDismiss();
    console.log(data);
  }

console log

data: {title: "dfg", desc: "dfgdf"}
role: undefined

Maybe after rebuilding, it resolved it own.
Closing this issue for now.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.