NgxComponentGraph

The Demo

Documentation

This library is the component graph version of ngx-graph, it is also very similar to angular version of react-flow-renderer.

ngx-graph provided the ability to use svgs as nodes, this library extends its functionality and allows user to pass in any angular component to be nodes of the graph. Specifically the features include:
1. Customize node style from your component
2. Pass in different component for each node
3. Customize edges
4. Panzoom
5. Drag and drop
6. Extending Node type to adding payload and carry extra data

Basic Usage

This example shows how you can pass custom style and data into the nodes.

!image

``html
[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.

LIKE
SHARE










``

Feedback

For feedback and questions, email sherry.shanli.yuan@gmail.com