Ionic 4 Angular - How to self dismiss a modal
To dismiss a modal in ionic v4. Do the following in your ionic modal component
export class ExampleModalComponent implements OnInit {
constructor(private navCtrl: NavController, private modalCtrl: ModalController) {
}
async closeModal() {
await this.modalCtrl.dismiss();
}
}
In Your Components HTML the button should look something like this.
<ion-button (click)="closeModal()">
<ion-icon slot="icon-only" name="arrow-back"></ion-icon>
</ion-button>
You can use the self dismiss the modal like this.
constructor(
private modal: ModalController,
) { }
dismiss() {
this.modal.dismiss();
}
According to the docs, it looks like the dismiss
method has moved to ModalController.
So to dismiss a modal, I need to do:
constructor(modalCtrl: ModalController) {
modalCtrl.dismiss();
}
How i(r)onic that I find my answer AFTER I post the question.
the ionic v4 documentation seems to be missing here yet I believe the correct way to access dismiss
from the modal is:
import { Components } from '@ionic/core';
@Component({
selector: 'app-some-modal',
templateUrl: 'some-modal.component.html',
styleUrls: ['some-modal.component.scss']
})
export class SomeModalComponent {
// modal is available here where created with:
// modalController.create({ component: SomeModalComponent})
@Input() modal: Components.IonModal;
onCancel = () =>
this.modal.dismiss('cancel');
}
while the modal
is actually of type HTMLIonModalElement
I am using Components.IonModal
since HTMLIonModalElement
is supposed to be global yet it is not visible to WebStorm/IntelliJ for some reason.