Material submenu in separate component doesn't open on mouseover

[karanbedre]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

Creating a menu component as a library when the nested menu is in a separate component. The basic functionality of the menu is to hover over it, a nested menu should be opened. However, when the nested menu is in a separate component, on hover of the parent options, the nested menu is not opening.

This functionality was working fine in angular v14, after upgrading to 15.2.9 we are facing this issue

NOTE: The same functionality will work if the nested menu is in the same component.

Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-bifan2?file=src%2Findex.html

Expected Behavior

To open the menu on hover when the nested menu is in a separate component

Actual Behavior

The menu on hover is not working when the nested menu is in a separate component

Environment

package.json versions

"@angular/animations": "15.2.9",
"@angular/cdk": "15.2.9",
"@angular/common": "15.2.9",
"@angular/compiler": "15.2.9",
"@angular/core": "15.2.9",
"@angular/forms": "15.2.9",
"@angular/material": "15.2.9",

[garrettld]

This is happening because the hover event subscription is set up in the trigger directive's ngAfterContentInit

components/src/material/menu/menu-trigger.ts

Lines 267 to 269 in 2f992e9

	ngAfterContentInit() {
	this._handleHover();
	}

At that point in time, the child component's @ViewChild has not yet been resolved, so the hover subscription setup is skipped.

Until/unless this is fixed, you can work around this by setting { static: true } on your @ViewChild in the recursive component. I've forked your repro and made that change here: https://stackblitz.com/edit/angular-mansgr?file=src%2Fapp%2Fapp%2Fsub-menu%2Fsub-menu.component.ts

[karanbedre]

@garrettld Thanks for the quick reply. Looks like it is working on the forked example. let me try on the real-time scenario.

[karanbedre]

@garrettld I am facing an issue where the mat-menu is not opening correctly in a child component when using ngIf and ng-template.

I forked the same example https://stackblitz.com/edit/angular-1oo5rt?file=src%2Fapp%2Fapp%2Fsub-menu%2Fsub-menu.component.html.

It works fine when I do not use the ngIf directive to open a menu in the child component.