NGX-Graph Nodes turns black when using third property

Question

I'm trying to make a crone tree using ngx-graph, and link each node to a pop-up so i went for the "@material-extended/mde", the issue i have is that i'm trying to define the pop-up content by node, so i tried using the property "data". But, whenever i add any new property to the nodes (other than id and label), the parse fails and all nodes turn black.

Is there any way i can make the pop-up content work, i'm planning to have forms and data grids into the pop-up depending on the node?

Here is a link to the stackblitz i'm working on

It always fails on the node with the additional field, so i thought it should be a parse issue, or node structure is predefined and cannot have the graph with more than the 2 fields (id and label).

Answer 1

By setting node.data = 'testdata' you overwrite the original node.data property which is used in example for node.data.color.

To solve your issue you can define the data object and create your own property inside

E.g.

Component:

{
    id: 'First',
    label: '12/10/2012 - 12/10/2013',
    data: { tooltip:'First testdata' }
  }

Html:

 <mat-card-content>
     Here goes data form/data grid {{node.data?.tooltip}}
 </mat-card-content>

Here is a working Stackblitz.

---

However node.data is already used by ngx-graph mabye you want to define your own property to avoid any side effects.

E.g.

Component:

{
    id: 'First',
    label: '12/10/2012 - 12/10/2013',
    tooltip:'First testdata'
  }

Html:

 <mat-card-content>
     Here goes data form/data grid {{node.tooltip}}
 </mat-card-content>