bug(menu): Using menu in component with CD "OnPush" and *ngIf causing "ExpressionChangedAfterItHasBeenCheckedError"

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

13.2.2

Description

Following error is thrown after opening the menu:

Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for '@transformMenu': 'void'. Current value: 'enter'.. 

Reproduction

Steps to reproduce:

1. Create a component which uses matMenuTriggerFor directive. Let’s call it cmp1.
2. Create component cmp2 with change detection OnPush
3. Inside cmp2 template create html element with *ngIf directive (<div *ngIf="foo"></div>)
4. Place cmp1 element inside the element with *ngIf

Expected Behavior

No errors when opening the menu.

Actual Behavior

Error:

NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for '@transformMenu': 'void'. Current value: 'enter'..

Reproduction demo app

mat-menu-bug.zip

Environment

• Angular: 13.2.3
• CDK/Material: 13.2.3
• Browser(s): Chrome 100
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[crisbeto]

I did reproduce it with your zip file, but I haven’t had the time to narrow down the root cause.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}