Side menu not opening on the page opened via button on modal - ionic-framework

Question

I am developing an ionic app with a side menu.
In my app, i added a modal that contains three button. When i click on any button in that modal, it opens a new page. On that new page, i have header containing a button that is used to open the side menu.
Problem
Side menu opens normally on any page that isn't opened via buttons on modal but when i try to open the side menu on a page that was opened via button on a modal, instead of opening the side menu on that page, it opens the side menu behind the current page and when i press back button to go back to previous page, side menu can be seen opened on the previous page.
Question
What is causing this behavior and how can i fix it ?
Custom Modal typescript code
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { LibraryPageSerice } from './libraryPage.service';
#IonicPage()
#Component({
selector: 'page-custom-posting-pop-up',
templateUrl: 'custom-posting-pop-up.html',
})
export class CustomPostingPopUpPage {
onLibraryPage: boolean;
constructor(private navCtrl: NavController, private navParams: NavParams,
private viewCtrl: ViewController,
private libService: LibraryPageSerice) {}
ionViewDidLoad() {
this.onLibraryPage = this.libService.onLibraryPage;
}
dismissModal(event) {
if(event.target.className === 'modal-container') {
this.viewCtrl.dismiss();
}
}
openCreationpage() {
this.viewCtrl.dismiss();
this.navCtrl.push('PostingCreationPage');
}
openSupportivePage() {
this.viewCtrl.dismiss();
this.navCtrl.push('PostingSupportivePage');
}
openLibraryPage() {
this.viewCtrl.dismiss();
this.navCtrl.push('MylibraryPage');
}
}
Custom modal html code
<div class="modal-container" (click)="dismissModal($event)">
<div class="modal">
<p>Posting Method</p>
<div class="btn-container">
<button class="creation-btn" (click)="openCreationpage()">My Creation</button>
<button class="supportive-btn" (click)="openSupportivePage()">Supportive</button>
<button *ngIf="!onLibraryPage" class="library-btn" (click)="openLibraryPage()">
My Library
</button>
</div>
</div>
</div>
This method is used to open the modal
posting() {
const modal = this.modalCtrl.create('CustomPostingPopUpPage');
modal.present();
}
If i don't use the modal and instead use an alert dialog to open the new page, side menu opens normally. So this problem only arises when i use a modal.

Answer 1

This is part of how modals are defined to work, "A Modal is a content pane that goes over the user's current page ... A modal uses the NavController to present itself in the root nav stack"
Because of this when you are calling this.navCtrl.push('PageName'); this instance of NavController is an Overlay Portal whereas a normal NavController not from a modal is a Nav. This will cause the page to be pushed along side your app-root (Which causes the results that you are witnessing).
Here are two solutions to this.
Pass in reference of NavController to your modal using NavParams
// home.ts
let modal = this.modalCtrl.create('ModalPage', {'nav': this.navCtrl});
// modal.ts
nav: Nav;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public viewCtrl: ViewController) {
this.nav = this.navParams.get('nav');
}
openSupportivePage() {
this.viewCtrl.dismiss();
this.nav.push('PostingSupportivePage');
}
Or pass which page you want to open to viewCtrl.dismiss() and parse with onDidDismiss
// home.ts
modal.onDidDismiss((open_page) => {
if (open_page !== undefined && open_page.hasOwnProperty('open_page')) {
this.navCtrl.push(open_page['open_page']);
}
});
// modal.ts
openCreationpage() {
this.viewCtrl.dismiss({'open_page': 'PostingCreationPage'});
}