Angular

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

1. Create a new project:

                   Copy code
   ng new orgchart
           

2. Go to the project root folder:

                   Copy code
   cd orgchart
           

3. Install Org Chart JS
   You need to use one of these two methods:
   
   
   • Downloaded package installation:
     • Extract the package and edit the orgchart.d.ts file to add the following row at the end of it:

                                           Copy code
       export default OrgChart
       

     • Create a folder balkanapp in \src\assets and add your extracted orgchart.js and orgchart.d.ts files there.
     • Add the orgchart.js file in scripts in your angular.json file.

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

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

                                       Copy code
       import OrgChart from "src/assets/balkanapp/orgchart";
       

     
     
   • NPM installation:

     Warning!

     May not work for the licensed version.

                             Copy code
     npm i @balkangraph/orgchart.js
     

     In your app.component.ts add this reference:

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

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

                                          Copy code
   constructor() { }
   
   ngOnInit() {
       const tree = document.getElementById('tree');
       if (tree) {
           var chart = new OrgChart(tree, {
               nodeBinding: {
               field_0: "name",
               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" }
           ]);
       }
   }
           

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

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

6. Start the project:

                   Copy code
   ng serve
           

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

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