Every tree node has action icon buttons which are displayed with hover on the node line. When I click on the first icon, it displays a mat-menu. But since action icon buttons are displayed ONLY on mouse hover, when the hover is on the menu, all icons disappear.
Full Answer
How to open a sub-menu from a mat-menu-item?
Material supports the ability for an mat-menu-item to open a sub-menu. To do so, you have to define your root menu and sub-menus, in addition to setting the [matMenuTriggerFor] on the mat-menu-item that should trigger the sub-menu: By default, the menu content will be initialized even when the panel is closed.
What is the element?
<mat-menu> is a floating panel containing list of options. By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive: The menu exposes an API to open/close programmatically.
How do I make a dropdown menu appear on hover?
The.dropdown class uses position:relative, which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute). The.dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px.
What is the use of hover in HTML?
The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button. Determine whether the dropdown content should go from left to right or right to left with the left and right properties.
link Toggling the menu programmatically
The menu exposes an API to open/close programmatically. Please note that in this case, an matMenuTriggerFor directive is still necessary to attach the menu to a trigger element in the DOM.
link Customizing menu position
By default, the menu will display below (y-axis), after (x-axis), and overlapping its trigger. The position can be changed using the xPosition ( before | after) and yPosition ( above | below) attributes. The menu can be be forced to not overlap the trigger using [overlapTrigger]="false" attribute.
link Nested menu
Material supports the ability for an mat-menu-item to open a sub-menu. To do so, you have to define your root menu and sub-menus, in addition to setting the [matMenuTriggerFor] on the mat-menu-item that should trigger the sub-menu:
link Lazy rendering
By default, the menu content will be initialized even when the panel is closed. To defer initialization until the menu is open, the content can be provided as an ng-template with the matMenuContent attribute:
link Passing in data to a menu
When using lazy rendering, additional context data can be passed to the menu panel via the matMenuTriggerData input. This allows for a single menu instance to be rendered with a different set of data, depending on the trigger that opened it:
link Accessibility
Menu triggers or menu items without text or labels should be given a meaningful label via aria-label or aria-labelledby.
Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Create A Hoverable Dropdown
Create a dropdown menu that appears when the user moves the mouse over an element.
Aligned Dropdown Content
Determine whether the dropdown content should go from left to right or right to left with the left and right properties.