I am currently struggling to properly integrate the sidemenu from the app.ts file.
app.html:
<ion-menu [content]="content"></ion-menu>
<ion-nav id="nav" [root]="rootPage" #content ></ion-nav>
app.ts
import {App, IonicApp,Page, Platform} from 'ionic-angular';
import {PageLogin} from './pages/login/login';
@App({
templateUrl: 'build/app.html',
config: {}
})
class MyApp {
rootPage: any = PageLogin;
constructor(private app: IonicApp, private platform: Platform) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
});
}
}
This setup allows for a functional side menu that can be interacted with, even though it is currently empty. The goal is to organize the code related to the side menu in the /pages folder and then inject this content into the <ion-menu> DOM element.
sidemenu.html
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
...
</ion-list>
</ion-content>
sidemenu.ts
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/sidemenu/sidemenu.html'
})
export class SideMenu{
constructor() {}
}
Is there a way to load a portion of HTML into a DOM file or is there an alternate method to separate the sidemenu code from the app.ts file?
Thank you in advance