I am trying to use the ion-menu-button component to show a side menu in some of my pages. The side menu is programmed in a component called AppHeader, that has a property called “dialog” that allow me to use the component in both the main pages or in “dialog” auxiliary pages.
page-header.html
<ion-header mode="md" id="app-header">
<ion-toolbar color="{{color}}">
<ion-buttons slot="start">
<ion-back-button
defaultHref="home"
*ngIf="dialog && onbackbutton.observers.length == 0">
</ion-back-button>
<ion-button
*ngIf="dialog && onbackbutton.observers.length > 0"
(click)="back()">
<ion-icon slot="start" name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>
<ion-row class="ion-align-items-center" *ngIf="!dialog">
<ion-col size="2">
<ion-img src="assets/Luna.logo.png" />
</ion-col>
<ion-col size="1" class="title-col">
<ion-label>{{title}}</ion-label>
</ion-col>
</ion-row>
<ion-label *ngIf="dialog">{{title}}</ion-label>
</ion-title>
<ion-buttons slot="end">
<ion-button aria-label="Favorite" *ngIf="refreshButton" (click)="onRefresh()">
<ion-icon name="reload" aria-hidden="true"></ion-icon>
</ion-button>
<ion-menu-button auto-hide="false" *ngIf="!dialog"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-menu contentId="app-header" side="end">
<ion-header >
<ion-toolbar color="primary">
<div class="logo ion-align-items-center">
<ion-img src="assets/Luna.logo.png"></ion-img>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<app-menu-option icon="information-circle" caption="Acerca de nosotros" (onclick)="about()"></app-menu-option>
<app-menu-option icon="bug" caption="Reportar un error" (onclick)="bugReport()"></app-menu-option>
<app-menu-option icon="accessibility" caption="UI Tests" (onclick)="uiTests()"></app-menu-option>
<app-menu-option icon="log-out" caption="Cerrar tu sesión" (onclick)="logout()"></app-menu-option>
</ion-content>
<ion-footer>
<ion-toolbar class="ion-text-center">
<ion-label color="secondary">Versión {{app.fullVersion}}</ion-label>
</ion-toolbar>
</ion-footer>
</ion-menu>
page-header.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { AppService } from '../../services/app.service';
import { UIService } from '../../services/ui.service';
@Component({
selector: 'app-page-header',
templateUrl: './page-header.component.html',
styleUrls: ['./page-header.component.scss'],
})
export class PageHeaderComponent implements OnInit {
@Input() title: string;
@Input() dialog: boolean;
@Input() refreshButton = false;
@Output() onrefresh:EventEmitter<any> = new EventEmitter();
@Output() onbackbutton:EventEmitter<any> = new EventEmitter();
get color(): string
{
return (this.dialog) ? 'secondary' : 'primary';
}
constructor(
public app: AppService,
private ui: UIService
) {
this.title = "Luna Escorts";
this.dialog = false;
}
ngOnInit() {}
about() {
alert("About");
} // about
bugReport() {
alert("bugReport");
} // bugReport
async logout() {
const confirmed = await this.ui.presentConfirmDialog('Deseas cerrar tu sesión?','Si','No');
if (confirmed) {
this.app.logout();
}
} // logout
onRefresh() {
if (this.onrefresh.observers.length > 0) {
this.onrefresh.emit(null);
}
}
uiTests() {
this.app.navTo("/tests/ui");
}
back() {
console.log("[PageHeaderComponent][back()]", this.onbackbutton.observers.length);
if (this.onbackbutton.observers.length > 0) {
this.onbackbutton.emit(null);
}
}
}
When dialog=false, it looks like this:
When dialog=false, it looks like this:
to go back from a secondary page (dialog=true) to the main page (dialog=false), I use NavController:
this.navCtrl.back();
When I load the main page, the menu button works perfectly and display the side menu:
but once I navigate to the secondary page and navs back to the main page, the menu button just won’t show anymore. I ran some tests and checked that:
- The problem persists even if I navigate back using router.Navigate()
- Using [hidden] instead of *ngIf to hide the menu button when dialog=true doesn’t make any difference.
- Setting dialog=true in the secondary page (so avoiding the ion-menu-button to be removed from the DOM) doesn’t make any difference. The side menu works perfectly on the second page, but stops working once we move back to the main page.