How to add a single node to the diagram area without any connections.

[Srinivas Pulla]

same as above

[Aravind Ravi]

Hi Aditya, 

By using the diagram add public API method, we can able to add node into diagram area without connections. Please refer below code snippet for how to add node at run time 

public created(args: Object): void { 

       let node: NodeModel = { 

        // Position of the node 

        offsetX: 250, 

        offsetY: 250, 

        // Size of the node 

        width: 100, 

        height: 100, 

        style: { 

            fill: '#6BA5D7', 

            strokeColor: 'white' 

        }, 

    }; 

        //Add Node 

        this.diagram.add(this.node); 

    } 

 For more information about how to use add nodes at run time, please refer to below UG documentation link 

UG link: https://ej2.syncfusion.com/angular/documentation/diagram/nodes/#addremove-node-at-runtime 

Regards 

Aravind Ravi 

[Srinivas Pulla]

Thank you for sharing this.

I want to have headers and footers on my diagram canvas too, so i was thinkinh if using some default nodes for them is there any way to add unconnected nodes by default in a diagram.

[Srinivas Pulla]

while trying to add nodes to a diagram i get an error saying : TypeError: Cannot read property 'add' of undefined.  

@ViewChild("diagram")

  public diagram: DiagramComponent;

public created() {

    this.diagram.add(this.newnode);

  }

 I was referring this : https://ej2.syncfusion.com/angular/documentation/diagram/nodes/?_ga=2.138512563.1247588523.1599384642-642027537.1594898543#addremove-node-at-runtime

[Aravind Ravi]

Hi Aditya, 

We have created a sample to add node without connections by default and add node by using add method.  To create a node, create a node object and add it to the diagram node’s collection. By using the node’s offsetX and offsetY property we can able to position the node in the diagram area. So based on your canvas you can render node and add it to the top and bottom of the page using offsetX and offsetY position.   

public nodes: NodeModel[] = [ 

    { 

      id: 'node1', offsetX: 100, offsetY: 100, annotations: [{ content: 'Node1'}], height: 100, width: 100 

    }, 

  ]; 

<ejs-diagram #diagram id="diagram" width="100%" height="645px" [snapSettings]='snapSettings' [nodes]='nodes' > 

                

            </ejs-diagram> 

We suspect that you did not set the diagram instance in the ejs-diagram , so only diagram of undefined error occurs. To get the diagram instance in the sample, set the instance object in the ejs-diagram and assign that instance object to the viewchild. After that you can able to get the diagram instance and access the diagram properties and diagram public API methods in the sample. Please refer below code snippet for how to set diagram instance. 

//html 

<ejs-diagram #diagram id="diagram" width="100%" height="645px" [snapSettings]='snapSettings' [nodes]='nodes' >                

</ejs-diagram> 

//ts 

//use the same object used in ejs-diagram. So that only diagram instance set, else it set as null. 

@ViewChild('diagram')  

public diagram: DiagramComponent; 

We have attached a sample for your reference. Please find the sample in below link 

Sample: https://stackblitz.com/edit/angular-srcbqt 

Regards 

Aravind Ravi