Primeng: Attach ContextMenu to any Element

[sdmoralesma]

I followed the bug: https://github.com/primefaces/primeng/issues/222 and locally I tested primeng beta5 (+ angular-rc1) and although the contextmenu works globally, when I try to use it in different components is not being displayed and Not throwing any exception, example:

I want to have different context menus, one for a _p-toolbar_ and other for a _div_, I tried doing this:
for p-toolbar:

<p-toolbar>
    <p-contextMenu [global]="false">
        <ul>
            <li>
                <a data-icon="fa-file-o">
                    <span>File</span>
                </a>
                <ul>
                    <li>
                        <a>
                            <span>Open</span>
                        </a>
                    </li>
                    <li>
                        <a>
                            <span>Quit</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="ui-toolbar-group-right">
            <button pButton type="button" data-icon="fa-plus"></button>
            <button pButton type="button" data-icon="fa-close"></button>
        </div>
    </p-contextMenu>
</p-toolbar>

for div:

<div style="margin-bottom: 10px;">
    <p-contextMenu [global]="false">
        <ul>
            <li>
                <a data-icon="fa-file-o">
                    <span>File</span>
                </a>
            </li>
        </ul>
    </p-contextMenu>
    <p-tree [value]="files" selectionMode="single" [(selection)]="selectedFile"
            (onNodeSelect)="myfunction()" (onNodeUnselect)="myotherfunction($event)"></p-tree>
</div>

But is not displaying any context menu. Am I doing something wrong?

[fischey]

I had the same problem.
The "problem" is the missing eventhandler which opens the contextmenu. In "local mode"([global]=false) you have to register an eventhandler on your own.
In global mode there is a global eventhandler registered during the onInit-method of the contextmenu which causes the contextmenu to open. See the Code ContextMenu-OnInit-method

If you add a handler to a component you can open the contextMenu via the exposed methods of the contextMenu class(show/hide + toggle).

For example you can do the following:

<p-contextMenu #contextMenu [model]="[{label:'Test'}]"></p-contextMenu>
<button (click)="contextMenu.show($event);$event.stopPropagation()">Test:{{contextMenu.visible}}</button>

The button will open the contextMenu with one entry. Beware of the $event.stopPropagation() part. If you drop this part, you will never see the contextMenu because the click event from the button will be propageted(forwarded) to the browser and the same click event which opens the menu will close it directly, see the clickHandler in the contextMenu class

I hope this helps you a little bit.

Best regards.