CODEWITHSUNDEEP
ionic4
Amit Pandey
Amit Pandey

Reputation: 307

How to close Menu in Ionic 4

I have just started ionic 4 and now i am searching a basic question,How to Close Menu in Ionic 4. ionic 4 has not properly documented till now. kindly anyone ans me.thanks in advance.

Upvotes: 3

Views: 9163

Answers (4)

miloth
miloth

Reputation: 286

you can simply ad ion-menu-toggle tag between the buttons:

<ion-content class="ion-padding">
<ion-menu-toggle>
  <ion-button>Click to close the menu</ion-button>
</ion-menu-toggle>

Upvotes: 0

salim
salim

Reputation: 21

// in the page .ts file

          // import menu controller...
import { MenuController } from '@ionic/angular';

          // inject in constructor
constructor(private menu: MenuController) {}

// create this function not inside the constructor 
closeMenu() {
    this.menu.close();
  }
}


// In the page .html file
<ion-item (click)="closeMenu()">
I close menu
</ion-item>

// or call the function on anything

Upvotes: 2

Wijdan
Wijdan

Reputation: 213

Add autoHide attribute in ion-menu-toggle.

       <ion-content>
        <ion-list>
            <ion-menu-toggle auto-hide="true" >
              <ion-item><ion-icon name="ios-home"></ion-icon>Home</ion-item>
              <ion-item><ion-icon name="md-apps"></ion-icon>Services</ion-item>
              <ion-item><ion-icon name="md-calendar"></ion-icon>My Bookings</ion-item>
              <ion-item><ion-icon name="ios-contact"></ion-icon>Profile</ion-item>
              <ion-item><ion-icon name="md-cart"></ion-icon>Cart</ion-item>
              <ion-item><ion-icon name="md-chatboxes"></ion-icon>Feedback</ion-item>
              <ion-item><ion-icon name="md-pin"></ion-icon>Our Locations</ion-item>
              <ion-item (click)="logOut()"><ion-icon name="md-log-out"></ion-icon>Logout</ion-item>
            </ion-menu-toggle>
          </ion-list>
      </ion-content>

Upvotes: 5

Amit Pandey
Amit Pandey

Reputation: 307

To close the Menu use this

Use menuCtrl in ts file in ionic 4

import { MenuController } from ‘@ionic/angular’;

...

constructor(private menu: MenuController) {}

//call this fn on click

openEnd() {  
 this.menu.close();

 }

OR in Html use ion-menu-toggle

<ion-menu-toggle>
<ion-item > My Button </ion-item>
</ion-menu-toggle>

Upvotes: 16

Related Questions