how to close ion card modal?

Question

modal.page.html

<ion-content>
  <ion-button id="trigger-button">Click to open modal</ion-button>
  <ion-modal trigger="trigger-button" [swipeToClose]="false" [presentingElement]="routerOutlet.nativeEl">
    <ng-template>
      <ion-content>
        <ion-grid>
          <ion-row class="">
            <ion-col size="4" class="ion-float-left">
              <ion-text color="primary"><h6 class="ion-no-margin fw-400">Cancel</h6></ion-text>
            </ion-col>
            <ion-col size="4" class="ion-text-center">
              <ion-text><h6 class="ion-no-margin fw-500">Card Modal</h6></ion-text>
            </ion-col>
            <ion-col size="4" class="ion-text-end">
              <ion-text color="muted"><h6 class="ion-no-margin fw-400">Done</h6></ion-text>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
    </ng-template>
  </ion-modal>
</ion-content>

modal.page.ts

import { Component, OnInit } from '@angular/core';
import { IonRouterOutlet, ModalController } from '@ionic/angular';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {

  constructor( public routerOutlet: IonRouterOutlet ) {  }  
  
  ngOnInit() {
  }

}

Modal is opening on click "Click to open modal" button. I want to close the modal on the " cancel " click.

How dismiss ionic V6 card modal?

Answer 1

You need to import and declare the ModalController and use this.modalCtrl.dismiss() to dismiss it.

import { Component } from '@angular/core';

import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-modal-example',
  templateUrl: 'modal-example.component.html',
})
export class ModalExampleComponent {
  name: string;

  constructor(private modalCtrl: ModalController) {}

  cancel() {
    return this.modalCtrl.dismiss(null, 'cancel');
  }

  confirm() {
    return this.modalCtrl.dismiss(this.name, 'confirm');
  }
}