where is this originalEvent coming from using EventEmitter in Angular 2+

Question

Maybe my google-fu is weak because I haven't been able to find anything about this, but I want to try to clarify something about the behavior of EventEmitters in Angular 2+ components. Consider the following code:

my-chart-1.component.html

<div *ngFor="let node of nodes">
    <div [id]="node.id" (click)="onNodeClick(node)">
    {{node.content}}
    </div>
</div>

my-chart-1.component.ts

@Output() nodeClick = new EventEmitter();

onNodeClick(nodeData: any): void {
    this.nodeClick.emit(nodeData);
}

my-chart-2.component.html

<div *ngFor="let node of nodes">
    <div [id]="node.id" (click)="onNodeClick($event)">
    {{node.content}}
    </div>
</div>

my-chart-2.component.ts

@Output() nodeClick = new EventEmitter();

onNodeClick(event: any): void {
    this.nodeClick.emit(this.currentNode);
}

home.component.html

<my-chart-1 (nodeClick)="onNodeClick($event)"></my-chart-1>
<my-chart-2 (nodeClick)="onNodeClick($event)"></my-chart-2>

home.component.ts

onNodeClick(event: any): void {
    console.log(event)
}

Here's the output from these two nodeClicks:

my-chart-1

{originalEvent: MouseEvent, node: {nodeData}}

my-chart-2

{nodeData}

Is it the case that capturing the originalEvent in the function that calls the eventEmitter.emit function is the reason that the originalEvent doesn't get automagically added to the data that gets emitted? Or is something else going on here that I don't understand? Where is the originalEvent coming from??

Answer 1

It's always awkward for me when I answer my own stackoverflow questions. This happens to me at least 3 times a year and I hate it every time. It's usually because I overlooked something stupid, and so the initial situation as I present it to the community of stackoverflow is always off somehow, and when I come back and correct it for posterity's sake, I manifest myself as the humongous doofus that I am. This instance is no exception.

For posterity's sake, I was using a library called primeng, and specifically the organization-chart module of primeng. On my orgchart I have a function called when the nodes are clicked. I also put a click-event function on the template for each particular node, which wasn't getting called as a coincidence of where I was clicking. The chart template looks something like this:

<p-organizationChart ... (onNodeSelect)="onNodeClick($event)" ... >
    <ng-template let-node >
        <div (click)="onNodeClick(node)">
            {{node.contents}}
        </div>
    </ng-template>
</p-organizationChart>

As you can see, I call the same function as a result of an event on the p-organizationChart as I do on the inner div, but because I never clicked on the inner div, I only saw the one event when I console.logged my results in the function. The "$event" that gets passed from the p-organizationChart includes the original event and the actual node data, so that's where the originalEvent was coming from in my output. But I was looking at the template for the individual nodes and thinking there was some sort of black magic involved. There was not. There was only me, being a doofus. Thank you for your time.