When using a modal to call another model on Ionic, there are some caveats to keep in mind. The first modal will be destroyed before showing the second one, presenting 3 alternatives:
- To control the second modal using logic on the parent page of the modals.
- To change the layout of the current modal with *ngIf.
- To use an Alert to display the "thanks" message.
From a UX perspective, it is preferable to go with option #3 as it is better to show alert messages that are short and direct.
#1. Showing Another Modal When the First One is Dismissed
In your parent page where you call AppointmentSubmitFeedbackComponent:
const modal = await this.modalCtrl.create({ component: AppointmentSubmitFeedbackComponent })
modal.onDidDismiss().then(async (dismissResult) => {
//This will contain the object returned when the modal dismisses itself
const returnedData = dismissResult.data
if(returnedData.success === true) {
//Show the second modal
const modal = await this.modalCtrl.create({ component: ThanksModalComponent })
await modal.present()
} else {
//Show error
}
In your AppointmentSubmitFeedbackComponent:
Remember to declare the modalCtrl in your constructor
onSubmitFeedback() {
this.postFeedback.caseId = this.selectedAppointment.caseId;
this.postFeedback.providerCity = this.selectedAppointment.providerCity;
this.postFeedback.providerCountry = this.selectedAppointment.providerCountry;
console.log(this.postFeedback);
let feedbackServ = this.feedbackServ.postFeedback(this.postFeedback);
feedbackServ.then(response => {
console.log('response : ', response);
this.modalCtrl.dismiss({ success: true })
}).catch(error => {
console.log('errProfile: ', error);
this.modalCtrl.dismiss({ success: false })
})
}
#2. Using *ngIf-else
appointment-submit-feedback.component.html
<ion-content *ngIf="!submitted; else thanksContent" class="ion-text-left ion-padding">
<div>
<ion-text>
<h2><b>Provide feedback</b></h2>
</ion-text>
<h4>
<p>You are giving feedback on the
following appointment:</p>
</h4>
<ion-text>Provider name</ion-text>
<br>
<ion-label>{{selectedAppointment.providerName}}</ion-label>
<br>
<ion-text>Specialty</ion-text>
<br>
<ion-label>{{selectedAppointment.specialty}}</ion-label>
<br>
<ion-text>Patient name</ion-text>
<br>
<ion-label>{{selectedAppointment.patientName}}</ion-label>
<br>
<ion-text>Date of appointment</ion-text>
<br>
<ion-label>{{selectedAppointment.date | date:'MMM dd,yyyy'}}</ion-label>
<ion-item></ion-item>
<br>
<ion-row>
<ion-col>
<ion-text>Please answer the following questions and submit your feedback</ion-text>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p class="question">Who was your treating physician?</p>
</ion-col>
</ion-row>
...Rest of the code here...
</ion-content>
...Rest of the code...
appointment-submit-feedback.component.ts
submitted = false
closeModal() {
this.modalCtrl.dismiss()
}
onSubmitFeedback() {
this.postFeedback.caseId = this.selectedAppointment.caseId;
this.postFeedback.providerCity = this.selectedAppointment.providerCity;
this.postFeedback.providerCountry = this.selectedAppointment.providerCountry;
console.log(this.postFeedback);
let feedbackServ = this.feedbackServ.postFeedback(this.postFeedback);
feedbackServ.then(response => {
console.log('response : ', response);
this.submitted = true
}).catch(error => {
console.log('errProfile: ', error);
this.submitted = true
})
}
#3.
appointment-submit-feedback.component.ts
//Declare the alertCtrl in the constructor
constructor( //...
private alertCtrl: AlertController,
// ...
)
onSubmitFeedback() {
this.postFeedback.caseId = this.selectedAppointment.caseId;
this.postFeedback.providerCity = this.selectedAppointment.providerCity;
this.postFeedback.providerCountry = this.selectedAppointment.providerCountry;
console.log(this.postFeedback);
let feedbackServ = this.feedbackServ.postFeedback(this.postFeedback);
feedbackServ.then(async (response) => {
console.log('response : ', response);
this.showThanksAlert()
}).catch(error => {
console.log('errProfile: ', error);
})
}
showThanksAlert() {
const alert = await this.alertCtrl.create({
message: 'Thanks for your submission',
buttons: [
{
text: 'Ok',
handler: () => {
this.modalCtrl.dismiss()
}
}
]
})
await alert.present()
}