There is the possibility of a menu item to open a modal?
This is definitely possible. The easiest way might be something like this:
menu.html
:
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
<ion-item-group>
<ion-list-header>Menu</ion-list-header>
<button ion-item menuClose *ngFor="let p of pages" (click)="showRoot(p)">
{{p.title}}
</button>
<button ion-item menuClose (click)="openModal(modalPage)">
Launch Modal
</button>
</ion-item-group>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>
menu.ts
:
import { Component, ViewChild } from '@angular/core';
import { Nav, ModalController } from 'ionic-angular';
import { FirstPage } from '../first/first';
import { SecondPage } from '../second/second';
import { ThirdPage } from '../third/third';
import { FourthPage } from '../fourth/fourth';
import { ModalPage } from '../modal/modal';
@Component({
templateUrl: 'menu.html'
})
export class MenuPage {
@ViewChild(Nav) nav: Nav;
rootPage = FirstPage;
modalPage = ModalPage;
constructor(public modalCtrl: ModalController){
this.pages = [
{ title: 'First Page', component: FirstPage },
{ title: 'Second Page', component: SecondPage },
{ title: 'Third Page', component: ThirdPage },
{ title: 'Fourth Page', component: FourthPage }
];
}
showRoot(page) {
this.nav.setRoot(page.component);
}
openModal(page) {
let modal = this.modalCtrl.create(page);
modal.present();
}
I’m not sure of the specifics of your app, but hopefully this gives you some good ideas.