Ionic 2 define menu on page component instead of root component
<p>I am having trouble trying to implement a simple menu in my Ionic 2 project. All of the examples I have seen online define the HTML for the menu within <code>app.html</code> and then only have a button with the <code>menuToggle</code> tag on the page that uses the menu.</p>

<p>Here's what I am trying to do. The root page of the app is a login page of sorts, called <code>HomePage</code>. this page is defined as <code>rootPage</code> in <code>app.ts</code> as seen below. After the user logs in, they are brought to the <code>SettlementPage</code> page. On this page, the user should be able to open a menu that displays a list of other settlements the user can travel to. </p>

<p>My problem is that I need to define the menu and its content from within the context of the <code>SettlementPage</code>, not the <code>HomePage</code>, which seems to be the way all of the examples do it. I am confused about how to go about doing this, since there is not much documentation on the topic. Specifically, I am confused about how the line <code>&lt;ion-nav #mycontent [root]="rootPage"&gt;&lt;/ion-nav&gt;</code> operates. What exactly does this bind the menu to? In all of the examples, <code>rootPage</code> is a member of the root component defined in <code>app.ts</code>. How would I go about binding a menu to a specific <code>Page</code> component?</p>

<p>One line of thinking I went down was that I needed to bind the menu to the <code>ion-content</code> section of this particular page's HTML. So, I added an ID field as in <code>&lt;ion-content id="content"&gt;</code> and then tried to reference it with <code>&lt;ion-menu [content]="content"&gt;</code> but that didn't seem to work. I also tried setting <code>this.rootPage = this;</code> within <code>settlement-page.ts</code> but that didn't work either. </p>

<p>I think I have some sort of fundamental misunderstanding about how menus are supposed to be bound to Pages. Is it even possible to do this, or does a menu have to be defined on the root component and accessed elsewhere referring to some sort of ID?</p>

<p>Here is the relevant code from my project for reference:</p>

<p><code>app.ts</code>:</p>

<pre><code>import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';

@App({
  template: '&lt;ion-nav [root]="rootPage"&gt;&lt;/ion-nav&gt;',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  rootPage: any = HomePage;
  platform: Platform;

  constructor(platform: Platform) {
    this.platform = platform;
    this.platform.ready().then(() =&gt; {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}
</code></pre>

<p><code>settlement-page.html</code>:</p>

<pre><code>&lt;ion-navbar *navbar&gt;
  &lt;button menuToggle side="left"&gt;
    &lt;ion-icon name="menu"&gt;&lt;/ion-icon&gt;
  &lt;/button&gt;
  &lt;ion-title&gt;
    {{settlement.name}}
  &lt;/ion-title&gt;
&lt;/ion-navbar&gt;

&lt;ion-menu side="left" [content]="mycontent"&gt;
  &lt;ion-toolbar&gt;
    &lt;ion-title&gt;Settlements&lt;/ion-title&gt;
  &lt;/ion-toolbar&gt;

  &lt;ion-content&gt;
    &lt;ion-list&gt;
      &lt;button ion-item *ngFor="let settlement of settlements" 
                       (click)="travelTo(settlement)"&gt;
          {{settlement.name}}
      &lt;/button&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
&lt;/ion-menu&gt;

&lt;ion-content&gt;
  &lt;p&gt;Name: {{player.name}}&lt;/p&gt;
  &lt;p&gt;Caps: {{player.caps}}&lt;/p&gt;
&lt;/ion-content&gt;

&lt;ion-nav #mycontent [root]="rootPage"&gt;&lt;/ion-nav&gt;
</code></pre>

<p><code>settlement-page.ts</code>:</p>

<pre><code>import {Page, NavController, NavParams, MenuController} from 'ionic-angular';
import {Player} from '../../providers/classes/player';
import {Settlement} from '../../providers/classes/settlement';
import {SettlementService} from '../../providers/services/settlement-service';
import {SqlService} from '../../providers/services/sql-storage-service';

@Page({
    templateUrl: 'build/pages/settlement-page/settlement-page.html',
    providers: [SqlService, SettlementService]
})
export class SettlementPage {
  private nav: NavController;
  private navParams: NavParams;
  private sqlService: SqlService;
  private settlementService: SettlementService;
  private player: Player;
  private settlement: Settlement;
  private settlements: Settlement[];
  private menu: MenuController;

  constructor(nav: NavController, navParams: NavParams, 
              sqlService: SqlService, settlementService: SettlementService,
              menu: MenuController) {
    this.nav = nav;
    this.navParams = navParams;
    this.sqlService = sqlService;
    this.settlementService = settlementService;
    this.menu = menu;

    this.player = navParams.get('player');
    this.settlement = navParams.get('settlement');
    this.settlements = settlementService.getSettlements();
    //don't allow navigation to current settlement
    this.settlements.filter((value: Settlement) =&gt; value != this.settlement);
    console.log(this.menu.getMenus());
  }
}
</code></pre>

<p>On the final line, <code>this.menu.getMenus()</code> returns an empty array, which tells me that the menu I have defined in <code>settlement-page.html</code> is not being recognized. I'm not sure what I'm doing wrong here.</p>

<p>Currently, the menu icon appears in the top left corner of the nav bar, but when I click on it a blank, transparent menu slides out from the left.</p>

<p>Any advice would be much appreciated. I've been stuck on this for a few hours now and there seems to be nothing online about defining and using menus outside of the app's root component.</p>