CODEWITHSUNDEEP
angularionic-frameworkionic4
Eliya Cohen
Eliya Cohen

Reputation: 11518

Ionic 4 Angular - How to self dismiss a modal

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.

Upvotes: 23

Views: 29756

Answers (5)

Eliya Cohen
Eliya Cohen

Reputation: 11518

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.

Upvotes: 39

sadalsuud
sadalsuud

Reputation: 479

on ionic 6

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

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

Upvotes: 0

Tommy Wong
Tommy Wong

Reputation: 89

You can use the self dismiss the modal like this.

constructor(
    private modal: ModalController,
) { }

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

Upvotes: 1

paulobunga
paulobunga

Reputation: 385

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>

Upvotes: 5

ciekawy
ciekawy

Reputation: 2337

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.

Upvotes: 11

Related Questions