Angular

This document shows you how to create an OrgChart JS Angular project.

Create a new project:

bash

ng new orgchart

Go to the project root folder:

bash

cd orgchart

Install OrgChart JS.

Download OrgChart JS and extract the package.
Create a folder balkanapp in src/assets and add your extracted orgchart.esm.js and orgchart.esm.d.ts files there.
Add the script in your angular.json file under options:

json

"scripts": [
  "src/assets/balkanapp/orgchart.esm.js"
]

In your app ts file add this reference:

javascript

import OrgChart from "../assets/balkanapp/orgchart.esm";

In the app html file add or replace the content with this:

html

<div id="tree"></div>

In the export class of app ts add this code:

javascript

constructor() { }

ngOnInit() {
  const tree = document.getElementById("tree");
  if (tree) {
    const chart = new OrgChart(tree, {
      nodeBinding: {
        field_0: "name",
        img_0: "img"
      }
    });

    chart.load([
      { id: 1, name: "John Doe", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
      { id: 2, pid: 1, name: "Jane Smith", title: "CTO", img: "https://cdn.balkan.app/shared/3.jpg" }
    ]);
  }
}

Start the project:

bash

ng serve

Here is how you can add some CSS to app css:

css

:host ::ng-deep [data-n-id='1'] rect {
  fill: #750000;
}

Here is how to define templates in Angular

Angular ​

Angular