In Side Menu no items are shown

Ionic Framework ionic-v3
1

Hello,

I have the problem, that in my app the items for the side menu aren’t displayed. When I click the menu icon, the side menu appears with the title ‘Menü’, but no items are shown.

app.ts

import {Component, ViewChild} from '@angular/core';
import {App, Platform, Nav} from 'ionic-angular';
import {StatusBar, Splashscreen} from 'ionic-native';
import {HelloPage}         from '../pages/HelloPage';



@Component({
  templateUrl: 'app.html'
})

export class MyApp{
  @ViewChild(Nav) nav: Nav;
  rootPage = HelloPage;

  constructor(private platform: Platform) {
    this.initializeApp();
  }

  initializeApp() {
    this.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();
      Splashscreen.hide();
    });
  }
}

app.html

<ion-menu [content]="content">
  <ion-toolbar>
    <ion-title>Menü</ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button ion-item>
        Einstellungen
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

When I use

<ion-navbar *navbar>

then even no navbar is shown.
So i have to use it so:

<ion-navbar>

hello.html

<ion-header>
<ion-navbar>
    <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
    <ion-title>Hello</ion-title>
</ion-navbar>

<ion-content padding">
    <h2>Hello World!</h2>
</ion-content>
</ion-header>

Please help!

2

I find the solution: I forgot to add

<ion-header>

see App.html

<ion-menu [content]="content">

    <ion-header>
      <ion-toolbar>
        <ion-title>Menü</ion-title>
      </ion-toolbar>
    </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item>
        Einstellungen
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

But why this

<ion-navbar *navbar>

doesn’t work?

3

@mdline I think asterisk (*) in that case is used only for the angular structural directives, like ngIf, ngFor, etc… If you want a local template variable to reference it somewhere you can use a hash:

<ion-navbar #navbar>

But if you won’t use this reference anywhere, you can just use <ion-navbar>.

4

ok, but I want to reuse the template with menu in other pages, but it doesn’t work.
What I make wrong?

  <ion-navbar #nav>
    <ion-title>New Page</ion-title>
  </ion-navbar>

<ion-content>
</ion-content>
5

@mdline I think in your page the ion-content should be outside ion-header:

<ion-header>
	<ion-navbar>
		<button menuToggle>
			<ion-icon name="menu"></ion-icon>
		</button>
		<ion-title>Hello</ion-title>
	</ion-navbar>
</ion-header>

<ion-content padding>
	<h2>Hello World!</h2>
</ion-content>

To have a better understanding you can create the ionic sidemenu app and see the code:

$ ionic start myApp sidemenu