Angular

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

  1. Create a new project:
                 
    ng new familytree
             
    Go to the project root folder:
                 
    cd familytree
             
  2. Install FamilyTree JS
    • Download FamilyTree JS.
    • Extract the package and edit the familytree.d.ts file to add the following row at the end of it:
                               
      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.
                               
      "src/assets/balkanapp/familytree.js"
       
    • In your app.component.ts add this reference:
                               
      import FamilyTree from "../assets/balkanapp/familytree";
       

    Warning!

    May not work for the licensed version.

                     
    npm i @balkangraph/familytree.js
     
    In your app.component.ts add this reference:
                     
    import FamilyTree from "@balkangraph/familytree.js";
     

  3. In the app.component.html file add or replase the content with this:
                 
    <div id="tree"></div>
             
  4. In the export class of app.component.ts add this code:
                 
    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:
                 
    ng serve
             
  6. Here is how you can add some CSS to app.component.css:
                 
    :host ::ng-deep [data-n-id='1'] rect {
        fill: #750000;
    }
              
Here is how to define templates in Angular