Data Binding in Angular Diagram component

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-angular-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-angular-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-angular-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();
 }