Side menu in separate file navigation

Ionic Framework ionic-v3
1

Hi,

I am wondering if anyone know how this would work. I am trying to put the sidemenu into a separate file for navigation instead of putting everything in app.component.ts.

I was able to get side menu working if I put the side menu into app.html file.

<ion-split-pane [when]="shouldShow()">
<ion-menu [content]="contentview" id="menu1">
	<ion-header>
	  <ion-toolbar>
	    <ion-title>{{userObject('email')}}</ion-title>
	  </ion-toolbar>
	</ion-header>
	<ion-content padding>
	    <ion-list>    
		    <button ion-item (click)='openPage()' menuClose>Dashboard
		      <ion-icon name="analytics" item-start></ion-icon>
		    </button>    	
			<button ion-item (click)='signOut()' menuClose>Sign Out
				<ion-icon name="md-exit" item-start></ion-icon>
			</button>    	
	    </ion-list>
    </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #contentview swipeBackEnabled="false" main></ion-nav>
</ion-split-pane>

Then in app.component.ts
I get the content reference

@ViewChild(‘contentview’) nav: Nav;

Then push the page

openPage(){
this.nav.push(‘BlankPage’);
}

However, if it put the entire thing into a separate file sidemenu.html
under app.html

<ion-split-pane [when]="shouldShow()">
<ion-menu [content]="contentview" id="menu1">
<ion-nav [root]="menuPage" #sidemenu swipeBackEnabled="false"></ion-nav> 
</ion-menu>
<ion-nav [root]="rootPage" #contentview swipeBackEnabled="false" main></ion-nav>
</ion-split-pane>

How do I reference the #contentview from my sidemenu.ts?
I tried using in sidemenu.ts

@ViewChild(‘contentview’) nav: Nav;

but it return undefined.

I think getComponent used to work from my forum search, but it seems it was depreciated. Now I have no idea how to reference contentView so I can push views to the main page

Been hacking at this for couple days now, maybe I missed something.
Any ideas would be appreciated.

Thanks!

2

Sorry to bump this. After studying the internal code, was able to get this working via the following:

  openPage(p){  	
  	let rootNav = this.appCtrl.getRootNavs();
    let pushPage = p.page;
    rootNav[1].setRoot(pushPage, {}, {animate: false});
  }

But this probably isn’t the right way to doing this, seems hackish.
Anyone know what is the proper way of handling this?

3

Can’t speak to “proper”, but life sure is easier if you just leave the menu in the app template. If you want the menu items themselves to be declared elsewhere, you can always put them in a provider and inject it in the app component. I don’t see any benefit to trying to move the menu itself, though.

4

Thanks for the suggestion. Yes, I end up doing that.
My intention was to keep app template as clean as possible and isolate all functional to each page.ts. but it was proving to be more of a headache than I imagine :smile: