I’ve created an side-menu as a component which looks like this:
import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';
@Component({
selector: 'app-side-menu',
templateUrl: './side-menu.component.html',
styleUrls: ['./side-menu.component.scss'],
})
export class SideMenuComponent implements OnInit {
constructor(private menu: MenuController) { }
ngOnInit() {
this.menu.enable(true, 'first');
}
openFirst() {
this.menu.open('first');
}
}
My side-menu.component.html looks like:
<ion-menu side="start" menuId="first">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
On any page, I try to use it like this:
this.sideMenu.openFirst();
Header on the html of the page looks like:
<ion-buttons slot="start">
<ion-menu-button autoHide="false" (click)='openMenu()'></ion-menu-button>
</ion-buttons>
<ion-title>
{{pageTitle}}
</ion-title>
The icon with three bars appears, but nothing happens at all, when clicking.
The open
-event is fired