Revision history [back]

In Ionic 4, you can close the menu by using the menuController service's close method. You can either call this method directly in your component, or you can use the @ViewChild decorator to access the menu element from your template and then call the menuController.close method.

Here's an example of how to close the menu from your component:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private menuController: MenuController) {}

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

And here's an example of how to close the menu from your template:

<ion-menu #myMenu>
  <ion-header>
    <ion-toolbar>
      <ion-title>
        Menu
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <!-- menu content here -->
  </ion-content>
</ion-menu>

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (click)="myMenu.close()">Close Menu</ion-button>
</ion-content>