Render nodes by loading the JSON from database in Angular Diagram?

This article explains how to render nodes ny loading the JSON from database in angular diagram. In the Angular Diagram, you can render the nodes and connectors at runtime by loading the JSON from the database. You can local host the data and can retrieve the same saved JSON from the database and send it to the client-side from the server-side and load it in the diagram using the data during runtime adding of nodes and connectors. 

Refer to the following code example to know how to local host the data:

Refer to sample: [Sample]

After hosting the data, ajax get the layout information required to add nodes and connectors. so that the datasource can render the provided layout information.

Refer to the following code example for how to render the runtime nodes and connectors.

ngOnInit(): void {
     const callback: Ajax = new Ajax(
        'http://localhost:57270/api/entity/Get', 'GET', false, 'application/json; charset=utf-8'
      );
      callback.onSuccess = (JsonString: any): void => {
        let diagramInstance= this;
        setTimeout( function () {
          //set an diagram layout
          diagramInstance.diagram.layout = {
            type: 'HierarchicalTree', verticalSpacing: 30, horizontalSpacing: 40,
           enableAnimation: true
         }
         //get a layout tree from database
          let parsedData = JSON.parse(JsonString);
          //set datasource
          diagramInstance.diagram.dataSourceSettings = {
            id: 'Name', parentId: 'Category', 
            dataManager: new DataManager(parsedData), 
            doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => { 
               nodeModel.shape = { type: 'Basic', shape:'Rectangle' }; 
               nodeModel.annotations = [{content: (data as EmployeeInfo).Name}]
           }
          }
        },100)
      };
      callback.send().then();
  }

Sample:

 https://www.syncfusion.com/downloads/support/directtrac/general/ze/Angularsample-1831788073

Conclusion

We hope you enjoyed learning about how to render nodes by loading the JSON from the database in Angular Diagram.

You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our  Angular Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Bolddesk Support, or feedback portal. We are always happy to assist you!