CODEWITHSUNDEEP
ionic-frameworkionic3
RRB
RRB

Reputation: 2116

Ionic 3 dismiss modal and navigate is hiding tabs

I have a problem where when I call this.viewCtrl.dismiss(); and this.navCtrl.push(HomePage); in my function, the tabs at the bottom of the page disappear

So I have 3 pages/modal: page1: home page, page2: modal, page3: second page

I navigate from my home page to the modal which has two actions(accept or reject)

If the user accepts then go to the second page, if the use rejects then go back to the home page. When the user accepts everything works as expected however if the user rejects then the app hides the tabs at the bottom of the page

My code for the reject button navigation is as follows

Modal page

  gotoHome(){
    this.viewCtrl.dismiss();
    this.navCtrl.push(HomePage);
  }

Second page

calling modal in constructor

  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage) {
    let myModal = this.modalCtrl.create(modal);
    myModal.present();
  }

My TabsPage is default as per Ionics Tabs Layout App

Upvotes: 1

Views: 1531

Answers (1)

Mystery
Mystery

Reputation: 1031

You don't need to push the homepage from the modal since, you said, you are going back to homepage.

Change in modal.ts

gotoHome(){
  this.viewCtrl.dismiss();
  this.navCtrl.push(HomePage);
}

to

accepted: boolean;

....

accept(){
    this.accepted = true;
    this.dismiss();
}

reject(){
    this.accepted = false;
    this.dismiss();
}

dismiss(){
    this.viewCtrl.dismiss(this.accepted);
}

Call the accept() when accepted and reject() when rejected

Handle your actions after dismissing view by 

let myModal = this.modalCtrl.create(modal);
myModal.onDidDismiss( accepted => {

  // your actions here
  console.log(accepted);   

  if(accepted){
      this.navCtrl.push(SecondPage);
  }

});
myModal.present();

I created an example here on stackblitz

Upvotes: 2

Related Questions