Angular

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

1. Create a new project:

                  Copy 
   ng new familytree
            

   Go to the project root folder:

                  Copy 
   cd familytree
            

2. Install FamilyTree JS
   Downloaded packageNPM package
   • Download FamilyTree JS.
   • Extract the package and edit the familytree.d.ts file to add the following row at the end of it:

                                Copy 
     export default FamilyTree
      

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

                                Copy 
     "src/assets/balkanapp/familytree.js"
      

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

                                Copy 
     import FamilyTree from "../assets/balkanapp/familytree";
      

   
   

   Warning!

   May not work for the licensed version.

                      Copy 
   npm i @balkangraph/familytree.js
    

   In your app.component.ts add this reference:

                      Copy 
   import FamilyTree from "@balkangraph/familytree.js";
    

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

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

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

                  Copy 
   constructor() { }
   
   ngOnInit() {
       const tree = document.getElementById('tree');
       if (tree) {
           var family = new FamilyTree(tree, {
               nodeBinding: {
               field_0: "name",
               img_0: "img"
               },
           });
   
            family.load([
               { id: 1, pids: [2], name: "Amber McKenzie", gender: "female", img: "https://cdn.balkan.app/shared/2.jpg"  },
               { id: 2, pids: [1], name: "Ava Field", gender: "male", img: "https://cdn.balkan.app/shared/m30/5.jpg" },
               { id: 3, mid: 1, fid: 2, name: "Peter Stevens", gender: "male", img: "https://cdn.balkan.app/shared/m10/2.jpg" },
               { id: 4, mid: 1, fid: 2, name: "Savin Stevens", gender: "male", img: "https://cdn.balkan.app/shared/m10/1.jpg"  },
               { id: 5, mid: 1, fid: 2, name: "Emma Stevens", gender: "female", img: "https://cdn.balkan.app/shared/w10/3.jpg" }
           ]);
       }
   }
            

5. Start the project:

                  Copy 
   ng serve
            

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

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