Nested contextMenuItems are not displayed when using Ivy

[Maistho]

Describe the bug When using Ivy and Angular 9, any contextMenuItems that are nested in other items such as a ng-container are not displayed.

It is the exact same issue as this: https://github.com/angular/angular/issues/34289

It can be resolved by updating the following line:

https://github.com/isaacplmann/ngx-contextmenu/blob/master/projects/ngx-contextmenu/src/lib/contextMenu.component.ts#L65

I had some issues building the library on my machine, so I had to update it to Angular 9 in order to build properly without any other changes.

I can open a PR with those changes as well if you'd like, but otherwise it should be a matter of updating the line as follows:

  @ContentChildren(ContextMenuItemDirective, { descendants: true })
  public menuItems: QueryList<ContextMenuItemDirective>;

[Maistho]

I ran into a new issue with nested context menus now instead, each nested contextMenuItem would appear in each parent context-menu, not only the closest one. I guess the solution is to remove the descendants: true, and make sure that each template is in the top-level. It makes making looped nested lists really difficult though...

This will not work in Ivy, but used to work previously. If I use {descendants: true} to make the top-level contextMenuItems show up, I will get each item from group.items in the top level as well.

<context-menu>
  <ng-container *ngFor="let group of groups">
    <ng-template contextMenuItem [subMenu]="groupSubmenu">
      {{ group.name }}
    </ng-template>
    <context-menu #groupSubmenu>
      <ng-template contextMenuItem *ngFor="let item of group.items">
        {{ item }}
      </ng-template>
    </context-menu>
  </ng-container>
</context-menu>

Some more info https://next.angular.io/guide/ivy-compatibility-examples#content-children-descendants

Any idea on how to approach this?

[capyash]

@isaacplmann , Any update on this? This is causing quite a few problems as conditional clauses/loops can't be applied.

[hypertextdevelopers]

@isaacplmann please fix it...

[Maistho]

I actually don't think this is fixable without some major reworking as to how the templates are structured... I looked into it a while back and decided that it was so difficult to fix that it was probably easier to implement a completely different system, which is what I did for our project.

If you manage to find a solution @hypertextdevelopers I would be very interested since this was a pain for our project, and my custom made solution also has some issues.

[Rishitosh0112]

Hi,

Is this fixed?.

Thank you

[apoorva-alevoor]

@isaacplmann, request you to fix this since we are unable to use ngx-contextmenu library for nested context menu with Ivy and Angular 9+