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 the Family Tree JS NPM package:

           npm i @balkangraph/familytree.js
           

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

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

5. 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" }
                   ]);
               }
           }
           

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

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

7. Start the project:

           ng serve
           

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

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