Prevent closing menu on click

#1

Hello. Is there a way for the menu to remain open or manually close/open after clicking to an item? I referred here but it’s not working on ionic 4.

app.component.html

<ion-item (click)="product()"> <ion-icon slot="start" [name]="'restaurant'"></ion-icon> <ion-label>Products</ion-label> <ion-icon slot="end" *ngIf="product_icon == 1" [name]="'remove'" class="col"></ion-icon> <ion-icon slot="end" *ngIf="product_icon == 0" [name]="'add'" class="col"></ion-icon> </ion-item>

app.component.ts

product() {
this.menu.open(‘main-menu’);

if (this.product_icon == 0) {
  this.product_icon = 1;
} else {
  this.product_icon = 0;
}

}

edited: coding

#2

See ‘menuClose’ property properly.

#3

It is not found on new documentation

#4

to update my last answer, always remember for whatever framework you are working in, they have done enough work to get international attention and you to use that. So, if they removed menuClose, that should be on purpuse. They have a tag ‘ion-menu-toggle’. Put your content inside it and menu wil be toggled.

#5

Still not preventing from closing the menu. My target is when I clicked a specific item on the menu, it will not automatically close. The behavior right now is they automatically close if you clicked the <ion-item> inside <ion-menu-toggle>. I tried the menuClose on <ion-item> but it’s not working, still closing automatically.

#6

Then just remove the wrapper of ion-item that is ion-menu-toggle. I am applying this and working too. I have 10items in menu, one of them I need to open as accordin, so I am not wrapping it with ion-menu-toggle.