Back navigation in angular ionic ModalController

Question

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:

configuration.page.html

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

configuration.page.ts

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

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>

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
}

Misha Mashina · Accepted Answer · 2023-04-28 15:34:40Z

0

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 Apr 28, 2023 at 15:34

Misha Mashina

2,1262 gold badges6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Back navigation in angular ionic ModalController

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related