Getting started

If you're looking to get up and running swiftly, you're in the right spot! This guide will expedite your journey from the starting point to a working application with NgDrawFlow in just a few minutes. Following this, you'll have the opportunity to explore NgDrawFlow more thoroughly through examples or by delving into the API documentation.

Play online

You can try NgDrawFlow without setting anything up locally by checking out the starter projects we have on CodeSandbox

Installation

To get started locally you should have a few things:

• Node.js installed.
• A working knowledge of Angular . You don't need to be an expert, but you should be comfortable with the basics.

First, spin up a new Angular project

NgDrawFlow is published on npm as ng-draw-flow, so go ahead and add it next.

Lastly, spin up the dev server and we're good to go!

Import Dependencies and Register Node Components

To get started with the ng-draw-flow library, begin by setting up your module with the necessary imports and component registrations.

Add the NgDrawFlowComponent and ReactiveFormsModule to your module's imports array:

    
      
    

      
        Copy
      
      
    
  

Then, within the providers section, register the components that you want to be available for use as nodes within the graph editor:

    
      
    

      
        Copy
      
      
    
  

Make sure to replace yourNode with your specific component identifier for the node within the editor, and YourNodeComponent with the actual component class you intend to use.

Set Up Data Model and Control for Graph Structure

In the component where you intend to construct your graph, you need to create a data structure that defines the nodes and connections.

    
      
    

      
        Copy
      
      
    
  

Next, link this data structure to your ng-draw-flow component using a FormControl . This will allow for reactive updates and interactions within your graph editor:

    
      
    

      
        Copy
      
      
    
  

This setup ensures that your ng-draw-flow component is fully integrated with the Angular forms system, enabling seamless data flow and state management for your graph.

Populate Example DfDataModel

To illustrate how to set up the DfDataModel with actual data, the following example lays out a scenario with a collection of nodes and their connections:

    
      
    

      
        Copy
      
      
    
  

Each node mainly consists of an id , a position , and a data field. Inside the data field, you need to specify the node type that was previously registered and all the data you want to provide to the node.

The connections array contains objects that describe the start and end points of each connection. The source and target holds information about which node and specific connector are used for each connection.

Creating Nodes

In ng-draw-flow, nodes can be customized to look and function just how you want them to. To create your own node, you should develop a component that extends from the DrawFlowBaseNode class. This component can render connector components such as DfInputComponent and DfOutputComponent .

The base class supports both styles: the classic properties nodeId / model / startNode and the signal API nodeIdSignal() / modelSignal() / startNodeSignal() when you need to build computed() values.

Here is a basic blueprint for a simple node component: