HTML context menu with Angular 4

GoJS
1

Hi

I’m trying to implement the example here: HTML Context Menu
but when I call (click)=“someFunction(event)”, I get an empty “event” in the function?

do you have an example I can see with Angular 2/4?

2

Which click event are you declaring? If it’s on GraphObject, we can talk about it; if it’s HTMLElement you need to figure that out yourself.

There’s an Angular 2 project in the projects/angular2-minimal subdirectory.

3

right click on a node or a group,
I’m trying to replace the regular context menu which is working, but can’t seem to get the data from the node

is there an HTML context menu in the example?

4

The Custom Context Menu sample that you linked to is one of them.

LightBox Style HTML Custom Context Menu is another.

Also, read ContextMenuTool | GoJS API and GoJS Context Menus -- Northwoods Software and GoJS HTML Interaction -- Northwoods Software

5

I’ve seen all of these:
I have the context menu up and running, the only issue is when I call a function from menu,
I don’t get any data from the link, not the event or the val. that is in Angular 4.

6

I do not understand what problem you have. Normally when programmers don’t know what to work on in some context menu event handler, they can look at the currentObject or mouseDownPoint of the diagram’s ContextMenuTool | GoJS API to find what they need. For example diagram.toolManager.contextMenuTool.currentObject.

7

I’ll try to clarify the issue with some code:
I have this in the HTML:

<div id="linkContextMenu" class="contextMenu">
     <ul>
        <li id='details' (click)="openTroubleTicket(event)"> הצגת נתוני עורק</li>
        <li (click)="openTroubleTicket(event)">העתק זיהוי</li>
        <li (click)="openTroubleTicket(event)">תקלות מצלות לעורק</li>
        <li (click)="openTroubleTicket(event)">תקלות לעורק</li>
        <li (click)="openTroubleTicket(event)">פתיחת תקלה חדשה לעורק</li>
        <li (click)="openTroubleTicket(event)">תקלות לעורק בתת הנושא</li>
    </ul> 
</div>

and this in TS: for using the view:

let linkContext = document.getElementById('linkContextMenu');

linkContext.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    return false;
}, false)

let myLinkContextMenu = $(go.HTMLInfo, {
            show: showLinkContextMenu,
            mainElement: linkContext
        })
        
function showLinkContextMenu(obj, diagram, tool){
    linkContext.style.display = 'block';
    let mousePt = diagram.lastInput.viewPoint;
    linkContext.style.left = mousePt.x + 'px';
    linkContext.style.top = mousePt.y + 'px';
}

up to here everything works great. I can see the menu and the click events and it works

the problem is here:

openTroubleTicket(event, val){
    let nodeData = event.part.data;
    let param={
        state: 'filter',
        tabindex: 0,
        params: {
            troubleTicketsIds: nodeData.tickets
        }
    };
    this.open_tt2(param);
}

as per your example code, I should get event and val in this function, only when I use it, I get both undefined.
Is this something relating to Angular 4? should I pass different parameters from the HTML so I get the correct values for use?

8

never mind, got it from diagram.toolManager.contextMenuTool.currentObject.

thank you