bug(cdkMenu): menu template context is not updated when cdkMenuTriggerData is changed

[ghostlytalamaur]

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

When cdkMenuTriggerData is used to pass additional context to a menu template the template context is not update when the data is changed.

Reproduction

GitHub
StackBlitz
Steps to reproduce:

1. Open the application.
2. Click the button "Click Me!". Menu with initial counter value is shown.
3. Click "Increment" button.
4. Click "Click Me!" button second time

Expected Behavior

Counter value in the context menu should be in sync with the value on the "Click Me!" button.

Actual Behavior

Counter value in the context menu keep initial value and is not updated when context changes.

Environment

• Angular: 15.0.0
• CDK/Material: 15.0.2

[martinvillysson]

I'm also experiencing this issue. I think its because of this check:

components/src/cdk/menu/menu-trigger-base.ts

Line 107 in 5d41978

if (this.menuTemplateRef && (!this._menuPortal || hasMenuContentChanged)) {

If i'm reading it correctly if the templateref hasnt changed the data is not updated.

[wagnermaciel]

I believe the way you are using the cdkMenuTriggerData in the #menu template is wrong. Here is a working example:
https://stackblitz.com/edit/angular-s5r2am-ccdczn?file=src%2Fmain.ts

[ghostlytalamaur]

I believe the way you are using the cdkMenuTriggerData in the #menu template is wrong. Here is a working example:
https://stackblitz.com/edit/angular-s5r2am-ccdczn?file=src%2Fmain.ts

In your example you don't use template context at all. You use counter value from component class, not from template context.

So, why the issue was closed if the bug is still here?

[wagnermaciel]

Oh whoops, that's my bad

[heunetik]

Also stumbled upon this issue while trying to reorder a list with some cdkMenuTriggerData attached to the elements.
While definitely not perfect, re-rendering the trigger component does update the data bindings.

I've modified the initial StackBlitz to re-render on increment, and it seems to work just fine.

Thought this workaround might help someone while we get a proper way of handling this issue.

[IzioDev]

We just encountered this behavior:

• in a directive, if menuData is updated, the menu template using this context (menuData) is not re-rendered with new context values, which is very unexpected at first.

The solution @heunetik is offering does work, but feels hacky considering it should correctly detect that a re-render of the menu template is required (consumed data has changed)

Is Angular team planning to consider a fix for this or lead contributors to a desired fix?

Or shall we avoid this patterns? (that worked this way with MatMenu)

[tmburnell]

We were facing this same issue ... If you use ngFor when the data updates the menu seems to update also.
However if you are using the CDK virtual scroll, and the data updates ... the menu seems to remember the last time it opened.

Since we are in a list ... it is much harder to even do the hack that was described above.
So it would be greatly appreciated, to regenerate the menu every time.

[thoughtpalette]

Also running into this... in 2025. The menu template should automatically be updated when the cdkMenuTriggerData has changed. Any updates or alternatives?

[LukasMachetanz]

I experienced the same issue and can confirm this too. Definitely not an expected behavior, at least in my opinion.

Looking at the source code seems to verify that menuPortal is not created again getting new menuData.

Definitely appreciated if this could be fixed.