Contribute : how to run FancyTree with Angular 4

[mojo2405]

after few days of experiencing I managed to run perfectly FancyTree on angular 4.
You should add it to the manual.

1. install jQuery and Fancytree via npm : npm install jquery jquery.fancytree
2. install jQuery typings : npm install --save @types/jquery
3. include jquery and fancytree in scripts array inside .angular-cli.json . e.g. :
   "scripts": [
   "../node_modules/jquery/dist/jquery.min.js",
   "../node_modules/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"
   ]
4. include fancytree style inside styles array inside .angular-cli.json . e.g. :
   "styles": [
   "../node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.min.css"
   ],
5. add jquery and fancytree to types array inside tsconfig.app.json file . e.g. :
   "compilerOptions": {
   ...
   "types": ["jquery","jquery.fancytree"]
   }
6. add fancytree html to html componnent. e.g :

• Root node 1
  • Child node 1
  • Child node 2

7. add jquery fancytree to you typescript file . e.g. : ngOnInit() { $('#tree').fancytree();

}

I'm sure this will help the comunity and I hope this is good contribution.

br.

[mar10]

Cool, thank you!
I started a tutorial page for this:
https://github.com/mar10/fancytree/wiki/TutorialIntegration#howto-run-fancytree-with-angular-4

Feel free to edit it there to your likings.

[jvasi]

Hi, might be a stupid question by why do we only save the types and not the libraries themselves?

E.g. why do we only
npm install --save @types/jquery @types/jquery.fancytree
but not:
npm install **--save** jquery jquery.fancytree

[mar10]

Thanks @jvasi
are those definitions current? The comment says Fancytree 2.7.0...
Who maintains that definitions?

[jvasi]

According to the npm repo:
https://www.npmjs.com/package/@types/jquery.fancytree
the last update was a month ago, so they seem current. You can checkout the maintainers on there too.

[ghost]

@mojo2405 , does this work only with HTML tree elements (step 6)?

[panyann]

I had troubles with this instruction and asked for solution on stack, then found it by myself:
https://stackoverflow.com/questions/57040488/angular-4-how-to-correctly-import-fancytree/57041627#57041627