Back navigation in angular ionic ModalController

Issue

I need to use a modal in my project. The use case is allowing users to modify their settings. E.g., a button is in a configuration page, that clicking on it, the modal is opened and users can change their usernames in. The modal has a submit button, which submits the form containing the new username.

However, afterwards, the user stays in the modal and is not navigated back to the configuration page! How can I fix it?

Here is a very short form of my code:

1. configuration.page.html

<ion-row>
  <ion-button expand="block"  (click)="initModal()"> Change username </ion-button>
</ion-row>

2. configuration.page.ts

async initModal() {
  const modal = await this.modalCtrl.create({
    component: editPage,
  });
  modal.onDidDismiss().then((modalDataResponse: any) => { });
  return await modal.present();
}

3. edit.page.htm (Modal):

<form  [formGroup]="editForm" (ngSubmit)="saveEdits()">
   <ion-input type="text" name="userName" formControlName="userName"></ion-input>        
   <ion-button type="submit">  Submit  </ion-button>   
</form>

4. edit.page.ts:

saveEdits(){
  // Save the new username
  // go back to the configuration page  
}

What I have tried are:

a. in the edit.html:

<ion-button type="submit" [routerLink]="['/configuration']">  Submit  </ion-button>  ---> did not work

b. in the edit.page.ts:

saveEdits(){
  this.router.navigate(['/configuration']); // didn't work
  this.location.back(); // didn't work
}

Solution

Import modal controller to your modal component:

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

Then declare it in constructor:

private readonly modalController: ModalController

And then in your saveEdits() method close the modal:

this.modalController.dismiss();

You can also send back data (to trigger popover alert or anything really) from modal to configuration page:

this.modalController.dismiss(data);

And in config page you can use it since you already put modalDataResponse.

Answered By - Misha Mashina