Reputation: 307
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
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
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
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
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