bug(menu): Nested Mat Menu misaligns and appears on click instead of hover for a reusable component with content projection

[gangadharjannu]

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

No response

Description

I'm creating a reusable mat menu component with content projection.

For a single menu, it is working fine without any issue, but for nested menu, it is not showing the default behavior:

1. Not showing right chevron for nested menu trigger
2. Nested menu opens only on click instead of on hover
3. Nested menu position is not aligned with parent menu

This issue also is in Angular 8 and 18

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-waqmm6ja?file=src%2Fapp%2Fmenu-panel%2Fmenu-panel.component.html (Angular 18)
https://stackblitz.com/edit/dynamic-material-menu-angular-8-dzzqt2cq?file=src%2Fapp%2Fmenu-panel%2Fmenu-panel.component.html (Angular 8)

Steps to reproduce:

1. Open StackBlitz, Click on 'Animal index' menu trigger which should open Mat Menu, click on 'Vertebrates' which should opens nested menu

Expected Behavior

It should

1. Show right chevron for nested menu trigger
2. Nested menu opens on hover
3. Nested menu position aligned with parent menu

Actual Behavior

1. Not showing right chevron for nested menu trigger
2. Nested menu opens only on click instead of on hover
3. Nested menu position is not aligned with parent menu

Environment

• Angular: 8 and 18
• CDK/Material: 18
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS