Hi all!
I’m using "@ionic/angular": "6.7.3"
and I’ve noticed some strange behavior with modals and canDismiss
property.
I set canDismiss to false in my component and create the modal:
async openBlablaModal() {
const blablaModal = await this.modalCtrl.create({
component: BlablaModalComponent,
canDismiss: false
})
await blablaModal.present()
}
The modal appears, but when I trying to close it by code inside BlablaModalComponent:
async closeModal() {
await this.modalController.dismiss()
}
nothing happens.
If I set canDismiss
to true, it works perfectly.
I’ve tried with getTop()
but it is the only visible modal.
And I’ve also tried adding an id
and specifying it when trying to close the modal, but nothing.
Can anyone help me or maybe is it a bug?
That’s exactly what canDismiss
is for. If you set it to false you can’t dismiss the modal.
Why are you setting it to false? In case where the modal should be be dismissed until some actiom happened for example you have to update the property to true before you dismiss it.
Thank you for your response.
But it’s strange how it works, isn’t it? I mean, I’m not supposed to let the user close the modal but I want to close it via code when the user does what I want, no?
I thought canDismiss
was the “alternative” to the deprecated swipeToClose
because if I set canDismiss
to true, but backdropDismiss
to false the user can close the modal via swipe.
I will investigate how to change the value from the modal when the user performs the requirements I need.
Thanks again
Hi again,
You are right, a simple callback solves my need.
I have misunderstood how canDismiss
works.
This solves it:
async openBlablaModal() {
const blablaModal = await this.modalCtrl.create({
component: BlablaModalComponent,
canDismiss: (data?: any, role?: string) => {
return new Promise<boolean>(resolve => resolve(role === "close"))
}
})
await blablaModal.present()
}
BlablaModalComponent:
async closeModal() {
await this.modalController.dismiss(undefined, "close")
}
Thank you very much