CODEWITHSUNDEEP
angularionic2
Richard
Richard

Reputation: 8935

Ionic2 menuToggle hide dynamically

I am using Ionic2, and would like to show/hide the menuToggle on a user event. This is how it's done in Ionic1. Does anyone know how to do it in Ionic2 please?

enter image description here

Thanks

Upvotes: 0

Views: 876

Answers (4)

alchi baucha
alchi baucha

Reputation: 1040

You can use the Events of 'ionic-angular' for that.

Use this code block on the user event:

this.events.publish("nameOfYourEvent", params)
//params => optional

Subscribe to the event

this.events.subscribe("nameOfYourEvent",(params) => {
    //toggleMenuVisibility Code goes here
    this.hideMenu = true;
})

On the view:

<button ion-button menuToggle *ngIf="!hideMenu">//[hidden] attribute is not working for some reason.
  <ion-icon name="menu"></ion-icon>
</button>

Don't forget to import the Events class from 'ionic-angular'.

import { Events } from 'ionic-angular';

Upvotes: 0

Allen Chen
Allen Chen

Reputation: 70

suppose your code as following:

<ion-menu [content]="mycontent" [class.hide]="hideMenu">
 <ion-content>
   <ion-list>
     <ion-item menuClose detail-none>Close Menu</ion-item>
   </ion-list>
 </ion-content>
</ion-menu>

then add hide style in the Component's .scss file:

.hide{display: none !important}

at last, in your .ts file, you can control the display state of menuToggle by change the value of "hideMenu", for Example, 

hideMenu: boolean = false; // at first the menuToggle is show
....
btnClicked(){
  this.hideMenu = !this.hideMenu;
}

Upvotes: 0

harinim
harinim

Reputation: 11

<ion-header>
    <ion-navbar>
       <button ion-button menuToggle>
         <ion-icon name="menu"></ion-icon>
       </button>
     </ion-navbar>
</ion-header>

Remove this HTML code from the page where you do not want to display menu-bar.

Upvotes: 1

Aravind
Aravind

Reputation: 41533

Assuming that your using Menu, ToggleMenu components and here is your solution

Menu bar content

<ion-menu [content]="mycontent" [enabled]="customVariable">
  <ion-content>
    <ion-list>
      <ion-item menuClose detail-none>Close Menu</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

userEvent(){
    this.customVariable=false;
}

Upvotes: 0

Related Questions