Menu button stop working after nav back

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.


<ion-header mode="md" id="app-header">
  <ion-toolbar color="{{color}}"> 
      <ion-buttons slot="start">       
                *ngIf="dialog && onbackbutton.observers.length == 0">        
                *ngIf="dialog && onbackbutton.observers.length > 0"
                <ion-icon slot="start" name="arrow-back"></ion-icon>
        <ion-row class="ion-align-items-center" *ngIf="!dialog">
            <ion-col size="2">
              <ion-img src="assets/Luna.logo.png" />
            <ion-col size="1" class="title-col">
        <ion-label *ngIf="dialog">{{title}}</ion-label>
      <ion-buttons slot="end">
        <ion-button aria-label="Favorite" *ngIf="refreshButton" (click)="onRefresh()">
          <ion-icon name="reload" aria-hidden="true"></ion-icon>
        <ion-menu-button auto-hide="false" *ngIf="!dialog"></ion-menu-button>

<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>
        <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-toolbar class="ion-text-center">
            <ion-label color="secondary">Versión {{app.fullVersion}}</ion-label>


import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { AppService } from '../../services/app.service';
import { UIService } from '../../services/ui.service';

    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';
        public app: AppService,
        private ui: UIService
    ) { 
        this.title = "Luna Escorts";
        this.dialog = false;

    ngOnInit() {}

    about() {
    } // about

    bugReport() {
    } // bugReport

    async logout() {
        const confirmed = await this.ui.presentConfirmDialog('Deseas cerrar tu sesión?','Si','No');
        if (confirmed) {
    } // logout

    onRefresh() {
        if (this.onrefresh.observers.length > 0) {

    uiTests() {"/tests/ui");


    back() {
        console.log("[PageHeaderComponent][back()]", this.onbackbutton.observers.length);
        if (this.onbackbutton.observers.length > 0) {


When dialog=false, it looks like this:

When dialog=false, it looks like this:
Screenshot 2023-10-12 at 10.15.02

to go back from a secondary page (dialog=true) to the main page (dialog=false), I use NavController:


When I load the main page, the menu button works perfectly and display the side menu:

Screenshot 2023-10-12 at 10.17.20

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.

I answer myself for future references:

Because the side menu is included inside the header component, is being recreated in every page, regarding being used or not. When naving back to the main page, the side menu from the previous page is still the last “side menu declared”, and therefore doesn’t work.

The trick for me was to use *ngIf on the ion-menu tag to only declare the side menu on the main page (dialog=false); this way when I call the secondary page, the side menu is not being redeclared and I when I nav back the last side menu declared is still the one on the main page, so the menu button works again.