Issue
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?
Solution
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');
}
}
Answered By - SergiPR
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.