{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-local-data",
  "framework": "angular",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "local-data",
  "dependencies": [
    "@syncfusion/ej2-angular-diagrams"
  ],
  "description": "Hierarchical tree diagram bound to local JSON data via DiagramModule and DataManager.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/diagram-local-data.md"
  },
  "files": [
    {
      "target": "src/components/diagram-local-data/local-data.component.ts",
      "content": "import { Component, ViewEncapsulation } from '@angular/core';\nimport {\n    Diagram, NodeModel, ConnectorModel, SnapConstraints, SnapSettingsModel,\n    DataBinding, HierarchicalTree, DiagramTools\n} from '@syncfusion/ej2-diagrams';\nimport { DataManager } from '@syncfusion/ej2-data';\nimport { species } from '../diagram-data';\nimport { DiagramModule } from '@syncfusion/ej2-angular-diagrams';\n\nexport interface DataInfo {\n    [key: string]: string;\n}\n\nDiagram.Inject(DataBinding, HierarchicalTree);\n\n/**\n * Local Data Binding sample\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'local-data.html',\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [ DiagramModule]\n})\nexport class LocalDataDiagramComponent {\n\n     // Used to set default values of node\n    public nodeDefaults(node: NodeModel): void {\n        node.shape = { type: 'Basic', shape: 'Rectangle' };\n        node.style = { strokeWidth: 1 };\n        node.width = 95;\n        node.height = 30;\n    };\n    public data: Object = {\n        id: 'Name', parentId: 'Category', dataSource: new DataManager(species),\n        //binds the external data with node\n        doBinding: (nodeModel: NodeModel, data: DataInfo) => {\n            nodeModel.annotations = [{\n                /* tslint:disable:no-string-literal */\n                content: data['Name'],\n                style: { color: 'black' }\n            }\n            ];\n            /* tslint:disable:no-string-literal */\n            nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };\n        }\n    };\n\n     // Used to set default values of connector\n    public connectorDefaults(connector: ConnectorModel): void {\n        connector.type = 'Orthogonal';\n        if (connector.style) {\n            connector.style.strokeColor = '#4d4d4d';\n        }\n        if (connector.targetDecorator) {\n            connector.targetDecorator.shape = 'None';\n        }\n    };\n\n    public tool: DiagramTools = DiagramTools.ZoomPan;\n    public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };\n    public layout: Object = {\n        type: 'HierarchicalTree', horizontalSpacing: 40, verticalSpacing: 40,\n        margin: { top: 10, left: 10, right: 10, bottom: 0 }\n    };\n}\n\nexport interface EmployeeInfo {\n    Role: string;\n    color: string;\n}"
    },
    {
      "target": "src/components/diagram-local-data/local-data.html",
      "content": "\n<div class=\"col-lg-8 control-section\" style=\"width: 100%;\">\n    <div class=\"content-wrapper\">\n        <ejs-diagram #diagram id=\"diagram\" width=\"100%\" height=\"350px\" [getConnectorDefaults]='connectorDefaults' [getNodeDefaults]='nodeDefaults'\n            [tool]='tool' [layout]='layout' [dataSourceSettings]='data' [snapSettings]='snapSettings'>\n        </ejs-diagram>\n    </div>\n</div>\n"
    }
  ]
}