Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Menu component not showing up

Tags:

ionic2

I am struggling to add a 'burger' menu into the blank ionic2 template. Not sure what am doing wrong here but all I have done is generate a blank ionic template, change template string to templateUrl in the app.ts and paste code into app.html. Am not getting any console errors.

app.ts:

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';


@Component({
  templateUrl: 'build/app.html'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // 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();
    });
  }
}

ionicBootstrap(MyApp);

app.html:

<ion-menu [content]="content">
    <ion-toolbar>
        <ion-title>Pages</ion-title>
    </ion-toolbar>
    <ion-content>
        <ion-list>
            <button ion-item (click)="openPage(loginPage)">
                Login
            </button>
            <button ion-item (click)="openPage(signupPage)">
                Signup
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav [root]="rootPage"></ion-nav>
like image 254
user1275105 Avatar asked Jun 16 '16 15:06

user1275105


1 Answers

I was missing the button

  <button right menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>

From home.html

<ion-navbar *navbar>
  <ion-title>
    Blank Starter
  </ion-title>
  <button right menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
</ion-navbar>

<ion-content class="home">
  <h1 text-center>Content goes here!</h1>
</ion-content>
like image 182
user1275105 Avatar answered Sep 24 '22 13:09

user1275105