Can't close the left menu since Beta-7

Ionic Framework ionic-v3
1

Hi all,

I encounter a problem on my application since I upgraded it to Beta-7.
I can’t close my LeftMenu, because the getComponent function has been deleted in this Ionic version.

So I understood that

let nav = this.app.getComponent('nav');

had to be replaced with :

@ViewChild(Nav) nav: Nav;

which works fine.

But how can I replace the following :

this.app.getComponent('leftMenu').close();

? Thanks by advance !

For information, here is my app.html structure : (which I found in a Ionic template months ago)

<ion-menu id="leftMenu" [content]="content">

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
2

Wo… Writing this topic, I found my solution alone :

I used :

@ViewChild(Menu) menu: Menu;

Sorry for the useless topic… I think I had to write it down :slight_smile:

3

Menu also has a MenuController that can be used from any page. The conference app uses this, for example:

import {MenuController} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/tutorial/tutorial.html'
})
export class TutorialPage {
  constructor(private menu: MenuController) { }

  onPageDidEnter() {
    // the root left menu should be disabled on the tutorial page
    this.menu.enable(false);
  }
}

MenuController docs: http://ionicframework.com/docs/v2/api/components/menu/MenuController/

1 Like
4

Can you share the complete code? I use the @ViewChild(Menu) menu: Menu; but this.menu returns undefined

5

Here is my very simple code : (in app.ts file)

import {Nav, Menu} from 'ionic-angular';
....
class MyApp {

    private app;
    private platform;
    private pages;

    @ViewChild(Nav) nav: Nav;
    @ViewChild(Menu) menu: Menu;
 
    constructor(app: IonicApp, platform: Platform, private authHttp: AuthHttp, private auth: AuthService) {

    ....
    } 

    openPage(page) {
        // close the menu when clicking a link from the menu
        // navigate to the new page if it is not the current page
        this.menu.close();
        this.nav.setRoot(page.component);
    
     }
}
6

If you try to access this.menu… in the constructor what do you get?

7

I think I tried, and indeed it was undefined.
Maybe you should use MenuController to access it in the constructor as @brandyshea mentioned.

8

I found out that in the constructor it never works so I access like you did