addItem method is empty in node_modules/@angular/material/esm2015/menu.js

[MartinJaskulla]

I updated @angular/material from 8.0.2 to 8.1.2 and my custom menu component stopped working with the keyboard.

The problem seems to be that in node_modules/@angular/material/esm2015/menu.js the addItem method is empty.

Version 8.1.2 node_modules/@angular/material/esm2015/menu.js

    /*
       * Registers a menu item with the menu.
       * @docs-private
       * @deprecated No longer being used. To be removed.
       * @breaking-change 9.0.0
       */
    /**
     * @param {?} _item
     * @return {?}
     */
    addItem(_item) {}

Version 8.0.2 node_modules/@angular/material/esm2015/menu.js

addItem(_item) {
    if (this._items.indexOf(item) === -1) {
        this._items.push(item);
        this._itemChanges.next(this._items);
    }
}

The code below worked before updating to 8.1.2

// MenuComponent
@ViewChild('menu', { static: false }) menu: MatMenu;
@ContentChildren(MenuItemComponent) menuItems: QueryList<
    MenuItemComponent
>;
@ContentChildren(MenuItemComponent) menuItems: QueryList<
    MenuItemComponent
>;
this.menuItems.forEach(menuItem => {
  this.menu.addItem(menuItem.matMenuItem);
});

// MenuItemComponent
@ViewChild(MatMenuItem, {static: false}) matMenuItem: MatMenuItem

1. Should the addItem method be empty? Is this a bug? @breaking-change 9.0.0 sounds to me that the method should be remove for @angular/material 9.0.0 and not be empty for 8.1.2

2. How should I register my custom menu items instead?
   Thanks!

[crisbeto]

We left in the addItem method so that people won't get compilation errors, but we'll remove it in a major version eventually (see #11720). You should be able to get your custom items to be picked up by adding this to the directive declaration:

providers: [{
  provide: MatMenuItem,
  useExisting: YourCustomMenuItem
}]

[MartinJaskulla]

Thanks for your response!

To which directive declaration should I add your code?

I tried:

app.component.html

<app-menu>
    <app-menu-item>Item 1</app-menu-item>
    <app-menu-item>Item 2</app-menu-item>
</app-menu>

menu-component.html

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
        <button mat-menu-item>Test 1</button> // works
        <app-menu-item>Test 2</app-menu-item> // does not work
        <ng-content></ng-content> // does not work <- Mostly interested in making ng-content work
</mat-menu>

menu-component.ts

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],
  providers: [{
    provide: MatMenuItem,
    useExisting: MenuItemComponent
  }]
})
export class MenuComponent {
    // empty. Do I need to do something in here?
}

[crisbeto]

It should be on your app-menu-item.

[MartinJaskulla]

Sorry for the inconvenience, but I still can't make it work.

https://stackblitz.com/edit/github-vud6ag?file=src%2Fapp%2Fcomponents%2Fmenu%2Fmenu.component.html

You mind taking a look?

[dhacc]

Is there any solution already? @MartinJaskulla @crisbeto

[lagatchell]

Currently menu items provided through content projection will display in the menu, but they will lose keyboard accessibility and support for sub-menus. Now that addItem is deprecated, is there another way to dynamically add items (that are content projected) to a menu?

[thw0rted]

Projection isn't the only issue. I'm trying to make a menu where items are dynamically instantiated using dynamic component loading. Basically, the <mat-menu> has a <ng-template> child, and when the owning component loads, it grabs the template, makes a ComponentFactory, and creates one or more components as children of the template. Everything renders correctly now but I can't get it to handle submenus gracefully.

I'll try to throw together a StackBlitz to illustrate, maybe somebody will have a better solution for me?

[thw0rted]

That took longer than anticpated.

I have put together a StackBlitz repro that illustrates what I'm trying to do. I have business objects whose classes share a parent, such that there are some common menu operations that they all share, and some specialized menu operations for individual types. I have a control widget that represents the object, and each instance knows which extra menu operations should be shown when its control widget is rendered.

In the example, the shared parent is Animal and all animals have a color. There's a common menu item that just shows the color, in a submenu so that we can demonstrate the issue here. When you mouse over the trigger for "color", the submenu flies out as expected. All animals also have a walk() method, and when you mouse over the shared Walk menu item, the flown-out menu automatically closes. This is the expected / correct behavior for submenus.

All the other menu items are dynamically added via explicit calls to ComponentFactory, based on Types provided by the Animal in question. Dog provides a component that adds a mat-menu-items with a submenu ("Mood") but mousing over it does nothing, and once you click to open it, it won't close again until you mouse over one of the menu items that wasn't dynamically added (i.e. "Color" or "Walk").

Of course, it should be possible to dynamically add new menu items, including sub-menus, at runtime, and have them behave identically to menu items declared in a template. The question is, should I open a new issue for this specifically, or can it be worked under this existing one?