OrgChart JS Documentation

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() {
                    var chart = new OrgChart(document.getElementById('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