PerfectMemory / ngx-contextmenu

A context menu component for Angular
https://perfectmemory.github.io/ngx-contextmenu
MIT License
42 stars 12 forks source link

Conditionally show/hide contextMenuItem #11

Closed Slavrix closed 2 years ago

Slavrix commented 2 years ago

Ive got a use case where the context menu is being used for "select". If the item is already selected, im looking for a way to hide "select" and instead show "unselect".

I have passed the [contextMenuValue] in which contains my data related to the context menu. In the angular inspector i can see that the templates inside the context-menu contain a value which looks to be passed in correctly.

<context-menu #eventMenu>
    <ng-template contextMenuItem (execute)="releaseSingleShift($event.value.event)">
      Release
    </ng-template>
    <ng-template contextMenuItem (execute)="selectShift($event.value.event)">
      {{value.event.selected?'Unselect':'Select'}}
    </ng-template>
</context-menu>

This is what I have tried.

Is there a way to do this already and I just havn't found the documentation yet for it?

Slavrix commented 2 years ago

I found it, by going through the https://github.com/isaacplmann/ngx-contextmenu/issues/158 you need to add let-value to the ng-template and it works.

sroucheray commented 2 years ago

Hi @Slavrix, thanks for pointing this out. This should be added to the documentation because its a pretty usual use case. If you think you can do a PR I would be glad (but do not feel like you have to). In the mean time I'll keep the issue open and mark it as documentation needed.

sroucheray commented 2 years ago

I added that to the documentation here https://perfectmemory.github.io/ngx-contextmenu/?path=/story/context-menu-documentation-in-a-nutshell--page

ryanmattos commented 1 year ago

Unfortunately it doesn't actually hide a contextMenuItem...

I have a list of items and possible options based on their status. Using let-value i can only hide its content (stuff inside ng-template), because the value will be available only to ng-template children, so the menu item is still there but empty...

sroucheray commented 1 year ago

@ryanmattos you should use the [visible] attribute of the [contextMenuItem] directive passing it a function, see https://perfectmemory.github.io/ngx-contextmenu/?path=/docs/context-menu-documentation-contextmenuitem--docs