Data Binding

import { Component, ViewEncapsulation } from '@angular/core';
import { Diagram, NodeModel, ConnectorModel, SnapConstraints, SnapSettingsModel, DiagramTools } from '@syncfusion/ej2-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
@Component({
    selector: 'app-container',
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="490px" [snapSettings]='snapSettings' [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' [tool]='tool' [layout]='layout' [dataSourceSettings]='data'>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {

    public nodeDefaults(obj: NodeModel): NodeModel {
        obj.width = 80;
        obj.height = 40;
        //Initialize shape
        obj.shape = { type: 'Basic', shape: 'Rectangle' };
        obj.style = { fill: '#048785', strokeColor: 'Transparent' };
        return obj;
    };

    public data: Object = {
        id: 'EmployeeID', parentId: 'ReportsTo',
        dataManager: new DataManager(
            { url: 'http://mvc.syncfusion.com/Services/Northwnd.svc/', crossDomain: true },
            new Query().from('Employees').select('EmployeeID,ReportsTo,FirstName').take(9),
        ),
        //binds the external data with node
        doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
            nodeModel.annotations = [{
                /* tslint:disable:no-string-literal */
                content: data['FirstName'],
                style: { color: 'white' }
            }];
        }
    };

    public connDefaults(connector: ConnectorModel): void {
        connector.type = 'Orthogonal';
        connector.style.strokeColor = '#048785';
        connector.targetDecorator.shape = 'None';
    };

    public tool: DiagramTools = DiagramTools.ZoomPan;
    public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };

    public layout: Object = {
        type: 'HierarchicalTree', margin: { left: 0, right: 0, top: 100, bottom: 0 },
        verticalSpacing: 40,
        getLayoutInfo: (node: NodeModel, options: TreeInfo) => {
            if (options.level === 3) {
                node.style.fill = '#3c418d';
            }
            if (options.level === 2) {
                node.style.fill = '#108d8d';
                options.type = 'Center';
                options.orientation = 'Horizontal';
            }
            if (options.level === 1) {
                node.style.fill = '#822b86';
            }
        }
    };
}

export interface EmployeeInfo {
    Role: string;
    color: string;
}
export interface DataInfo {
    [key: string]: string;
}

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent} from '@syncfusion/ej2-ng-diagrams';

@Component({
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [dataSourceSettings]='data'>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram: DiagramComponent;
    public data: Object = {
      crudAction: {
        //Url which triggers the server side AddNodes method
        create: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/AddNodes',
      },
      connectionDataSource: {
      crudAction: {
           //Url which triggers the server side AddConnectors method
           create: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/AddConnectors',
        }
      }
    };
     //Sends the inserted nodes/connectors from client side to the server side through the URL which is specified in server side.
     this.diagram.insertData();
 }

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent} from '@syncfusion/ej2-ng-diagrams';

@Component({
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [dataSourceSettings]='data'>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram: DiagramComponent;
    public data: Object = {
      crudAction: {
         //Url which triggers the server side UpdateNodes method
           update: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/UpdateNodes',
      },
      connectionDataSource: {
      crudAction: {
           //Url which triggers the server side UpdateConnectors method
           update: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/UpdateConnectors',
        }
      }
    };
     //Sends the updated nodes/connectors from client side to the server side through the URL which is specified in server side.
     this.diagram.updateData();
 }

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent} from '@syncfusion/ej2-ng-diagrams';

@Component({
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [dataSourceSettings]='data'>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram: DiagramComponent;
    public data: Object = {
      crudAction: {
         //Url which triggers the server side DeleteNodes method
          destroy: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/DeleteNodes',
      },
      connectionDataSource: {
      crudAction: {
           //Url which triggers the server side DeleteConnectors method
           destroy: 'https://ej2services.syncfusion.com/development/web-services/api/Crud/DeleteConnectors',
        }
      }
    };
     //Sends the deleted nodes/connectors from client side to the server side through the URL which is specified in server side.
     this.diagram.removeData();
 }