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');
}
}