# diagram-local-data

> Hierarchical tree diagram bound to local JSON data via DiagramModule and DataManager.

**Framework:** angular  **Component:** Diagram  **Variant:** local-data

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/diagram-local-data.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-diagrams
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/diagram-local-data/local-data.component.ts

```typescript
import { Component, ViewEncapsulation } from '@angular/core';
import {
    Diagram, NodeModel, ConnectorModel, SnapConstraints, SnapSettingsModel,
    DataBinding, HierarchicalTree, DiagramTools
} from '@syncfusion/ej2-diagrams';
import { DataManager } from '@syncfusion/ej2-data';
import { species } from '../diagram-data';
import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';

export interface DataInfo {
    [key: string]: string;
}

Diagram.Inject(DataBinding, HierarchicalTree);

/**
 * Local Data Binding sample
 */
@Component({
    selector: 'control-content',
    templateUrl: 'local-data.html',
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [ DiagramModule]
})
export class LocalDataDiagramComponent {

     // Used to set default values of node
    public nodeDefaults(node: NodeModel): void {
        node.shape = { type: 'Basic', shape: 'Rectangle' };
        node.style = { strokeWidth: 1 };
        node.width = 95;
        node.height = 30;
    };
    public data: Object = {
        id: 'Name', parentId: 'Category', dataSource: new DataManager(species),
        //binds the external data with node
        doBinding: (nodeModel: NodeModel, data: DataInfo) => {
            nodeModel.annotations = [{
                /* tslint:disable:no-string-literal */
                content: data['Name'],
                style: { color: 'black' }
            }
            ];
            /* tslint:disable:no-string-literal */
            nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };
        }
    };

     // Used to set default values of connector
    public connectorDefaults(connector: ConnectorModel): void {
        connector.type = 'Orthogonal';
        if (connector.style) {
            connector.style.strokeColor = '#4d4d4d';
        }
        if (connector.targetDecorator) {
            connector.targetDecorator.shape = 'None';
        }
    };

    public tool: DiagramTools = DiagramTools.ZoomPan;
    public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };
    public layout: Object = {
        type: 'HierarchicalTree', horizontalSpacing: 40, verticalSpacing: 40,
        margin: { top: 10, left: 10, right: 10, bottom: 0 }
    };
}

export interface EmployeeInfo {
    Role: string;
    color: string;
}
```

### src/components/diagram-local-data/local-data.html

```html

<div class="col-lg-8 control-section" style="width: 100%;">
    <div class="content-wrapper">
        <ejs-diagram #diagram id="diagram" width="100%" height="350px" [getConnectorDefaults]='connectorDefaults' [getNodeDefaults]='nodeDefaults'
            [tool]='tool' [layout]='layout' [dataSourceSettings]='data' [snapSettings]='snapSettings'>
        </ejs-diagram>
    </div>
</div>

```