Ionic 4 pass data back from modal which is opened inside another modal to base page

I am opening a modal on-base page called home.page.ts. On this modal 1, another modal is opened on a button click. Now I want to send data back from 2nd modal to base page called ‘home.page.ts’

Currently

  1. I am getting data back from l(first modal) to home page
  2. I am getting data from (second modal) to (first modal)

But I want to get data directly from 2nd modal to base page

I am sending data back using a modal dismiss event. And 2nd modal’s dismiss event function is written on (first modal) page. Now, How can I access this data at the base page which is home.page.ts

Note: All these modals are lazy loaded Which means modal1’s module is added in the imports of base page’s module and modal2’s module is added in the imports of modal1’s module

here is my code
home.page.ts

import { ModalController } from '@ionic/angular';
import { AddressPage } from '../pages/address/address.page';

 constructor(public modalController: ModalController) {}


  async address_modal(){
    // console.log("clicked")
     const modal = await this.modalController.create({
       component: AddressPage,

     });

     modal.onDidDismiss()
     .then((data) => {
       const user = data['data']; // Here's your selected user!
       console.log("from address "  + user)

   });

     return await modal.present();
   }
}

home.page.html

  <ion-button (click) = "address_modal()">address</ion-button> // to open first modal

address.page.ts // first modal

 x:any;

  constructor(private modalController: ModalController) { 
   this.x =2;
  }

close(){
    this.modalController.dismiss(this.x)
  }


    async add_address(){


      // console.log("clicked")
       const modal = await this.modalController.create({
         component: AddAddressPage,

       });
       modal.onDidDismiss()
       .then((data) => {
         const user = data['data']; // Here's your selected user!
         console.log( "from add-adreess"  + user)

     });

       return await modal.present();
     }

address.html

<ion-button (click)="close()">close</ion-button> // close modal
<ion-button (click)="add_address()">open</ion-button> // open second modal

add-address.page.ts // second modal

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

 x:any;
  constructor(private modalController: ModalController) {
    this.x =5;
   }


  close(){
    this.modalController.dismiss(this.x)
  }

add-address.html

  <ion-button (click) ="close()">close</ion-button >
1 Like

While you wait for somebody to answer the specific question you asked, I’m going to try to convince you to design it away.

A modal means “sorry, user, I need you to take an urgent simple action before we can return to normal operation”. Firing off another modal from there goes beyond that. Here’s Apple’s UX advice on the topic.

1 Like

I have same detail, another one