bug(COMPONENT): MatMenuTrigger as a HostBinding does not toggle the menu

[CarbonCollins]

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

HI,

not sure if its actually a bug or if I am just doing something that I shouldn't be. I have a component that is intended to open a mat-menu when clicked. If i attach the directive to an element within the component like [matMenuTriggerFor]='subMenu' then it works no problem. If instead I register the directive as a HostDirective like so:

@Component({
  selector: 'app-dynamic-menu-item',
  templateUrl: './dynamic-menu-item.component.html',
  styleUrl: './dynamic-menu-item.component.scss',
  hostDirectives: [{
    directive: MatMenuTrigger,
    inputs: ['matMenuTriggerFor:subMenu']
  }]
})
export class DynamicMenuItemComponent {
  @HostBinding('tabindex') public tabindex = 0;
  @ViewChild(MatMenu) subMenu: MatMenu;
}

I can see that the trigger classes are added to my host element but when clicking the element the menu does not open.

Reproduction

I don't have access to stack blitz due to it being blocked for me

Expected Behavior

When clicking the host element the mat menu is toggled

Actual Behavior

when clicking the host element the mat menu does not appear

Environment

• Angular: v17
• CDK/Material: v17
• Browser(s): Edge, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, WSL2 Ubuntu

[crisbeto]

The inputs: ['matMenuTriggerFor:subMenu'] means that the matMenuTriggerFor input from MatMenuTrigger is being exposed as the subMenu input on the DynamicMenuItemComponent. It's not possible to bind the ViewChild result to it.