Ionic 4 Angular - How to self dismiss a modal

Question

In Ionic 3, dismissing a modal was pretty simple:

constructor(viewCtrl: ViewController) {
    this.viewCtrl.dismiss()
}

In Ionic 4, I can't import ViewController (or to be accurate, my IDE tries to import a type of ViewController).

I was wondering what the new approach of dismissing a modal is.

score 39 · Accepted Answer · edited Nov 18 '22 at 14:21

39

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.

edited Nov 18 '22 at 14:21

Loz

118
11

answered Sep 23 '18 at 10:26

Eliya Cohen

10,716
13
59
116

@MohamedSaleh https://ionicframework.com/docs/api/modal-controller – Eliya Cohen Oct 27 '19 at 06:39
@Elliya I have managed to do it, but with calling the dismiss from an onclick function not like you advised – Mohamed Saleh Oct 27 '19 at 15:15
1

How ionic* FTFY – Michael Artman Sep 28 '21 at 18:05
1

@Michael Artman fixed – Eliya Cohen Sep 28 '21 at 18:11

score 11 · Answer 2 · answered Mar 03 '19 at 14:26

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.

Thank you @ciekawy - one day when Google prioritizes v4 over v3 documentation and when there is enough Stack Overflow answers to fill the gaps of missing documentation using Ionic will be so much fun! :D — Grant, May 04 '19 at 23:55
Writing from the future, it's still a nightmare because the framework is completely reinvented every 9 months. — John, Dec 09 '21 at 20:45

score 5 · Answer 3 · answered Nov 10 '19 at 14:17

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>

score 1 · Answer 4 · answered Sep 03 '20 at 01:17

1

You can use the self dismiss the modal like this.

constructor(
    private modal: ModalController,
) { }

dismiss() {
    this.modal.dismiss();
}

answered Sep 03 '20 at 01:17

Tommy Wong

89
1
2

score 0 · Answer 5 · answered Sep 29 '22 at 21:43

0

on ionic 6

the modal can dismiss put (click)="modal.dismiss()":

<ion-modal #modal [keepContentsMounted]="true" (click)="modal.dismiss()">

answered Sep 29 '22 at 21:43

sadalsuud

460
4
12

Ionic 4 Angular - How to self dismiss a modal

5 Answers5