Splitpane with @IonicPage -> no hamburger button

@WebField wrote:

I am using the Splitpane component with the new @IonicPage decorator.

The problem is that the hamburger icon isn't shown up when the screen size gets reduced.
This only happens when I use the @IonicPage decorator.
Does someone know what's the problem?

Thanks in advance!

Here's some code:

app.html:

<ion-split-pane>
    <ion-menu [content]="content">
        <ion-header>
            <ion-toolbar>
                <ion-title>Work Time Calculator</ion-title>
            </ion-toolbar>
        </ion-header>

        <ion-content>
            <ion-list>
                <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
                    <ion-icon name="{{p.icon}}" item-left></ion-icon>
                    {{p.title}}
                </button>
            </ion-list>
        </ion-content>
    </ion-menu>

    <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
    <ion-nav [root]="rootPage" main #content></ion-nav>

</ion-split-pane>

app.component.ts:

import {Component, ViewChild} from '@angular/core';
import {Nav} from 'ionic-angular';

interface Page {
	icon: string,
	title: string,
	component: string
}

@Component({
	templateUrl: 'app.html'
})
export class MyApp {
	@ViewChild(Nav) nav: Nav;

	rootPage: string = 'dashboard';
	pages: Page[];

	constructor() {
		this.initializeApp();
		this.pages = [
			{icon: 'stats', title: 'Dashboard', component: 'dashboard'}
		];
	}

	initializeApp() {
	}

	openPage(page: Page) {
		// Reset the content nav to have just this page
		// we wouldn't want the back button to show in this scenario
		this.nav.setRoot(page.component);
	}
}

dashboard.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


@IonicPage({
  name: 'dashboard'
})
@Component({
  selector: 'page-dashboard',
  templateUrl: 'dashboard.html',
})
export class DashboardPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DashboardPage');
  }

}

Posts: 1

Participants: 1

Read full topic