0

I use the ngx-graph library in Angular 7 to display a hierarchy graph. My setup looks like the following:

<ngx-graph *ngIf="(tree$ | async) as tree" style="width: 100%; height: 100%; display: grid"
           [links]="tree.links"
           [nodes]="tree.nodes"
           [curve]="curve"
           [draggingEnabled]="false"
           [panningEnabled]="panningEnabled"
           [enableZoom]="zoomEnabled"
           [zoomSpeed]="zoomSpeed"
           [minZoomLevel]="minZoomLevel"
           [maxZoomLevel]="maxZoomLevel"
           [panOnZoom]="panOnZoom"
           [orientation]="orientation"
           [autoZoom]="autoZoom"
           [autoCenter]="true"
           [update$]="update$"
           [center$]="center$"
           [zoomToFit$]="zoomToFit$"
           (select)="selected($event)" xmlns:svg="http://www.w3.org/1999/XSL/Transform">
  <ng-template #nodeTemplate let-node>
    <ng-container style="cursor: pointer">
    <svg:g class="node">
      <svg:circle [attr.r]="node.width/2" [attr.cx]="node.width/2" [attr.cy]="node.width/2" [attr.fill]="node.color || node.options.color" />
      <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.height / 2">{{node.label}}</svg:text>
    </svg:g>
    </ng-container>
  </ng-template>
</ngx-graph>

I tried to put something between the let-node of ngx-graphs code, using a ng-container to not break the template hierarchy, and wrapping a style with a cursor attribute around the svg, but it did not help.

What would the alternative be? I was not able to find anything at all related to the problem, the documentation of ngx-graphs does seem to be incomplete and strange.

ProgFroz
  • 197
  • 4
  • 17

1 Answers1

0

This can be done in CSS. This example will change the cursor to the pointer when hovering on a node.

g.node rect,text {
  cursor: pointer;
}
amen
  • 1
  • 1