How do I inject settings into a DagreClusterLayout in ngx-graph?

Question

I would like to move the label in the cluster node to the top instead of the center. While I could create my own custom layout, it seemed that there are some options in DagreClusterLayout that would probably do this for me when I look at the code

I had no idea how you would do this from the HTML. So I started with:

    <ngx-graph class="chart-container" [view]="[800,800]" [links]="links" [nodes]="nodes" [clusters]="clusters" layout="dagreCluster"></ngx-graph>

And changed it to

    <ngx-graph class="chart-container" [view]="[800,800]" [links]="links" [nodes]="nodes" [clusters]="clusters" [layout]="layout"></ngx-graph>

under the assumption I would need to create a new object to change the settings.

In the header of my component TypeScript file I have:

import { DagreClusterLayout } from '@swimlane/ngx-graph/lib/graph/layouts/dagreCluster';
import { Alignment } from '@swimlane/ngx-graph/lib/graph/layouts/dagre';

and the body I have

    let layout : DagreClusterLayout = new DagreClusterLayout();
    layout.settings = layout.defaultSettings;
    layout.settings.align = Alignment.UP_LEFT;
    this.layout = layout;

However, I am not importing correctly, as I get the errors:

ERROR in ./src/app/my/my.component.ts
Module not found: Error: Can't resolve '@swimlane/ngx-graph/lib/graph/layouts/dagre' in '(path)\src\app\my'
ERROR in ./src/app/my/my.component.ts
Module not found: Error: Can't resolve '@swimlane/ngx-graph/lib/graph/layouts/dagreCluster' in '(path)\src\app\my'

Even if my attempt at changing the setting will not achieve the desired result, I would be interested in knowing how to change the settings in general.

Answer 1

I was making things too complicated, anticipating I needed to get inside the layout object. But ngx-graph does this for me with layoutSettings.

    <ngx-graph class="chart-container" [view]="[800,800]" [links]="links" [nodes]="nodes" [clusters]="clusters" layout="dagreCluster" [layoutSettings]="{
    orientation: 'LR',
    marginX: 5,
    marginY: 5,
    edgePadding: 100,
    rankPadding: 20,
    nodePadding: 5,
    multigraph: true,
    compound: true,
    align: 'UL'
  }"></ngx-graph>