Angular
This document shows you haw you can create an FamilyTree JS Angular project.
-
Create a new project:
ng new familytree
-
Go to the project root folder:
cd familytree
-
Install FamilyTree 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";
-
Extract the package and edit the familytree.d.ts file to add the following row at the end of it:
-
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";
-
Downloaded package installation:
-
In the app.component.html file add or replase the content with this:
<div id="tree"></div>
-
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" } ]); } }
-
Start the project:
ng serve
-
Here is how you can add some CSS to app.component.css:
:host ::ng-deep [data-n-id='1'] rect { fill: #750000; }