Angular nested mat-menu-item "matMenuTriggerFor". Opening nested menu with 100ms delay: Solved

I don't know if it will be useful for anyone. I'm a newbie in Angular but I've faced with a problem for nested mat-menu-item.

So the problem is - when we have nested mat-menu-item that are the trigger for the other mat-menu and trying to go to the nested mat-menu and accidentally cross the sibling matMenuTrigger with mouse - we open the sibling mat-menu.

And it's really annoying issue that I've faced with. During some discovering I didn't found a good solution on the web but I did my own one. I'm not sure that it's a good solution but it can help you to avoid such issues.

This is how it work with the directive I've created

I've created a directive that you can bind to your matMenuTrigger. Here you can check my Stackblitz

Let me know if you have a better solution or just use what I've made

Wish you the best!

Continue reading...