[The Demo](https://blckwolf5851.github.io/ngx-component-graph/)
npm install ngx-component-graphhtml
[nodes]="raw_nodes"
[edges]="raw_edges"
[viewportWidth]="600"
[viewportHeight]="400"
>
`
Where raw_nodes and raw_edges are defined in .ts file as:
`js
import { Edge, Node } from 'ngx-component-graph';
// This is how you can pass in your own data
interface CustomNode extends Node {
payload?: object;
}
raw_edges: Edge[] = [
{
id: '1',
source: 'node1',
target: 'node2',
},
{
id: '2',
source: 'node3',
target: 'node4',
},
{
id: '3',
source: 'node1',
target: 'node3',
},
{
id: '4',
source: 'node2',
target: 'node5',
},
];
raw_nodes: CustomNode[] = [
{
id: 'node1',
style: { width: '200px', border: 'dotted 4px #cc3' }, // pass custom style to node
payload: { title: 'Nice component!' }, // carry custom data for display
},
{
id: 'node2',
style: { width: '300px', border: 'dotted 2px #ccc' },
},
{
id: 'node3',
},
{
id: 'node4',
},
{
id: 'node5',
},
];
`
Custom Templates
If you want to add custom components into each node, or customize the handle / edges. You would want to pass your components into the templates, in example below, an angular material expansion-panel + card is passed into nodes. This example is an extension of above example, all the styles and data extension are used.
!Alt Text
`html
[nodes]="raw_nodes"
[edges]="raw_edges"
[viewportWidth]="600"
[viewportHeight]="400"
>
{{
node.payload ? node.payload.title : "placeholder"
}} >
Shiba Inu
Dog Breed
mat-card-image
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu"
/>
The Shiba Inu is the smallest of the six original and distinct
spitz breeds of dog from Japan. A small, agile dog that copes very
well with mountainous terrain, the Shiba Inu was originally bred
for hunting.
``