OrgChartJS Docs

Angular

This document shows you haw you can create an OrgChart JS Angular project.

1. Create a new project:

               ng new orgchart
           

2. Go to the project root folder:

               cd orgchart
           

3. Install the OrgChart JS NPM package:

               npm i @balkangraph/orgchart.js
           

4. In your app.component.ts add this reference:

               import OrgChart from "@balkangraph/orgchart.js";
           

5. In the export class of app.component.ts add this code:

               constructor() { }
   
               ngOnInit() {
                 const tree = document.getElementById('tree');
                 if (tree) {
                   var chart = new OrgChart(tree, {
                     nodeBinding: {
                       field_0: "name",
                       field_1: "title",
                       img_0: "img"
                     },
                   });
   
                   chart.load([
                       { id: 1, name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
                       { id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
                       { id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://cdn.balkan.app/shared/4.jpg" },
                       { id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://cdn.balkan.app/shared/5.jpg" },
                       { id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://cdn.balkan.app/shared/6.jpg" },
                       { id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://cdn.balkan.app/shared/7.jpg" },
                       { id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://cdn.balkan.app/shared/8.jpg" }
                   ]);
                 }
               }
           

6. In the app.component.html file add or replase the content with this:

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

7. Start the project:

               ng serve
           

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

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