I have a parent wrapper class and child angular material menu button. When I hover outside of the parent class, I need to hide the whole wrapper. But when I click on the button (which opens mat-menu) which is inside the parent wrapper class, the whole parent closes.
I should be able to do any click operation inside the parent wrapper and only when I hover outside of the parent it should close. How can I implement this?
I've tried adding
event.stopImmediatePropagation();
event.preventDefault();
event.stopPropagation();
on the button click of the child mat menu but still the parent wrapper is getting closed
https://stackblitz.com/edit/angular-ekjzq5
This is the stackblitz link where I reproduced my issue. On click of menu button it should open the menu instead of closing the whole parent div.
I should be able to click on the button menu and should be able to click on the items in the menu
<button mat-button (mouseover)="showBase=true">Hover on me </button>
<div *ngIf="showBase" class="div-style">
<span (mouseleave)="showBase=false">
<button mat-icon-button [matMenuTriggerFor]="menu"
#menuTrigger="matMenuTrigger" >
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
<span>
<button mat-menu-item>
<mat-icon>home</mat-icon>
<span>Home</span>
</button>
<button mat-menu-item>
<mat-icon>people_outline</mat-icon>
<span>Connecting</span>
</button>
</span>
</mat-menu>
</span>
</div>