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.