Angular

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

1. Create a new project:

                  Copy 
   ng new familytree
            

2. Go to the project root folder:

                  Copy 
   cd familytree
            

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

                            Copy 
         export default FamilyTree2
          

   • 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 the scripts in your angular.json file.

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

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

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

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

                  Copy 
       import FamilyTree2 from "../assets/balkanapp/familytree2";
    

   and this code in the export class:

                  Copy 
       constructor() { }
   
       ngOnInit() {
           const tree = document.getElementById('tree');
           if (tree) {
               var familyTree = new FamilyTree2(tree); 
               familyTree.readOnly = false;
               familyTree.addFamilyMembers([
                   {id: 1, spouseIds: [2], motherId: 3, fatherId: 4},
                   {id: 2},
                   {id: 3},
                   {id: 4},
               ]).draw(1);
           }
       }
                

6. In style.css add this:

                  Copy 
       html, body, #tree {
           height: 100%;
       }
    

7. Start the project:

                  Copy 
       ng serve