0

Problem

I am using the ngx-graph library to build a flow diagram in Angular 9. I want to get the id value of a clicked node. I tried logging "$event" and looked through the PointerEvent object that displayed in the Console. I couldn't find the id value or any other information about the node I clicked. Am I printing out the wrong variable?

Code

component.component.html

<ngx-graph
    class="chart-container"
    [view]="[800, 800]"
    [links]="[]"
    [nodes]="[
        {
            id: 'site-access',
            label: 'Site Access'
        }
    ]"
    [clusters]="[]"
    layout="dagreCluster"
>
    <ng-template #defsTemplate>
        <svg:marker
            id="arrow"
            viewBox="0 -5 10 10"
            refX="8"
            refY="0"
            markerWidth="4"
            markerHeight="4"
            orient="auto"
        >
            <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
        </svg:marker>
    </ng-template>

    <ng-template #nodeTemplate let-node>
        <svg:g
            (click)="onNodeClick($event)"
            class="node"
        >
            <svg:rect
                [attr.width]="node.dimension.width"
                [attr.height]="node.dimension.height"
                [attr.fill]="node.data.color"
            />
            <svg:text
                alignment-baseline="central"
                [attr.x]="10"
                [attr.y]="node.dimension.height / 2"
            >
                {{ node.label }}
            </svg:text>
        </svg:g>
    </ng-template>

</ngx-graph>

component.component.ts

import { Component, OnInit } from '@angular/core';
import * as shape from 'd3-shape';

@Component({
    selector: 'component',
    templateUrl: './component.component.html',
    styleUrls: ['./component.component.less'],
})
export class ComponentComponent implements OnInit {
    constructor() {}

    onNodeClick($event) {
        console.log('Clicked', $event); <-- What goes in here to get information about the clicked node?
    }

    ngOnInit(): void {}
}
Izin
  • 11
  • 2

1 Answers1

1

I figured it out. I am supposed to pass "node" into onNodeClick in component.component.html.

Izin
  • 11
  • 2