HTML context menu with Angular 4

GoJS
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?