Hamburger icon reloading every time setRoot called

Ionic Framework ionic-v3
1

I’m using the following code on my pages -

<ion-header>
  <ion-navbar>
    <ion-grid>
      <ion-row>
        <ion-col class="pull-left"><ion-icon name="person" (click)="rootPage(profilePage)"></ion-icon></ion-col>
        <ion-col class="pull-right"><ion-icon menuToggle name="menu"></ion-icon></ion-col>
      </ion-row>
    </ion-grid>
  </ion-navbar>
  <div class="subheader">
    <h2>{{page.title}}</h2>
  </div>
</ion-header>

The problem I am experiencing is that the Hamburger icon (name=“menu”) reloads each time a new page is navigated to. This doesn’t happen with the user icon.

When a user clicks on a button to navigate to a new root page the hamburger icon disappears and then reappears.

What could be causing this? Is there a fix?

2

I think I might have found the reason for this -

I’ve removed menuToggle from the icon and now the icon “flashes” (disappears then reappears) about once every 3-5 times.

The first time it “flashes” after about the third page load. This one is the slowest i.e. the icon disappears for about half a second.

After that the “flashes” are quite rapid.

3

I can confirm that this is definitelycaused by menuToggle.

I had left menuToggle on one of the pages in my last test. Once I removed that instance the hamburger icon now consistently stays on the page.

I have tried -

  • Using menuToggle on the element
  • Moving menuToggle to the element
  • Wrapping with a and putting menuToggle on the button element. The button element is still inside the element

I will try MenuController.open()

4

FIX

Using MenuController.open() has resolved this.

Here’s the code:

component.ts

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

...

@Component({
  ...
})

export class ExamleComponent {
  
...

  constructor(private nav: NavController, private menu: MenuController) {

....

  openMenu() {
    this.menu.open();
  }

  ....
}

component.html

<ion-col class="pull-right"><ion-icon name="menu" (click)="openMenu()"></ion-icon></ion-col>