Angular

This document shows you how to create a Family Tree JS 2 Angular project.

Create a new project:

bash

ng new familytree

Go to the project root folder:

bash

cd familytree

Install Family Tree JS 2.

Download Family Tree JS 2.
Extract the package and edit the familytree2.d.ts file to add this line at the end:

typescript

export default FamilyTree2;

Create a balkanapp folder in src/assets and copy familytree2.js and familytree2.d.ts into it.
Add the script in your angular.json file under options:

json

"scripts": [
  "src/assets/balkanapp/familytree2.js"
]

In app.component.html add or replace the content with this:

html

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

In app.component.ts add this import:

typescript

import FamilyTree2 from '../assets/balkanapp/familytree2';

Then add this code in the exported class:

typescript

constructor() { }

ngOnInit() {
  const tree = document.getElementById('tree');
  if (tree) {
    const 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);
  }
}

In styles.css add this:

css

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

Start the project:

bash

ng serve

Angular ​

Angular