Show / Hide Table of Contents

Angular

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

  1. Create a new project:
            ng new familytree
            
  2. Go to the project root folder:
            cd familytree
            
  3. Install Family Tree JS
    You need to use one of these two methods:

    • Downloaded package installation:
      • 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.
                "scripts": [
                    "src/assets/balkanapp/familytree.js"
                ]
                            
      • In your app.component.ts add this reference:
                import FamilyTree from "src/assets/balkanapp/familytree";
                            

    • NPM installation:
      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";
                          

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