3

I created login and logout functionality I given logout in side menu. Logout functionality working properly but the problem after logout side menu is seeing. How to hide side menu after logout and go home page.

enter image description here

2 Answers 2

10

You can use the menuClose directive:

The menuClose directive can be placed on any button to close an open menu.

A simple menuClose button can be added using the following markup:

<button ion-button menuClose>Close Menu</button>

or

<button ion-item menuClose>Close Menu</button>

That would make the menu to be closed when you select the logout option from the side menu.


If you want to have more control over the menu, you can use the MenuController and use it to close the menu programmatically, from the component code.

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

@Component({...})
export class MyPage {

 constructor(public menuCtrl: MenuController) {

 }

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

 closeMenu() {
   this.menuCtrl.close();
 }

 toggleMenu() {
   this.menuCtrl.toggle();
 }

}
8
  • @sabaferreras in ionic 1 when we logout and go home page it does not show sidemenu automatically hide how we can same in ionic 2 because according to your solution we have to use button for it Jun 28, 2017 at 8:11
  • You can inject the MenuController and use it to hide it, like I show you in the last part of the answer, and by doing it like that you don't need a button, you can do this.menuCtrl.close(); inside of the logout method Jun 28, 2017 at 8:14
  • And the menuClose directive also works with ion-item acting as buttons, like you're using them in the screenshot provided in the question. Jun 28, 2017 at 8:16
  • 1
    # sebaferreras last solution working for me,Thanks a lot Jun 28, 2017 at 8:36
  • 1
    you can also publish event with this.menu.swipeEnable(false); on logout and this.menu.swipeEnable(true); when login again
    – Sohan
    Jun 28, 2017 at 12:38
0
import { MenuController } from '@ionic/angular';

constructor(public menuCtrl: MenuController)

logout(){
    this.menuCtrl.close();
    this.router.navigate(['home']);

}

Latest Ionic version code may be used like this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.