Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contribute : how to run FancyTree with Angular 4 #776

Closed
mojo2405 opened this issue Sep 28, 2017 · 6 comments
Closed

Contribute : how to run FancyTree with Angular 4 #776

mojo2405 opened this issue Sep 28, 2017 · 6 comments

Comments

@mojo2405
Copy link

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
Copy link
Owner

mar10 commented Sep 29, 2017

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.

@mar10 mar10 closed this as completed Sep 29, 2017
@jvasi
Copy link

jvasi commented Oct 22, 2017

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
Copy link
Owner

mar10 commented Oct 23, 2017

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

@jvasi
Copy link

jvasi commented Oct 28, 2017

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
Copy link

ghost commented Dec 5, 2018

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

@panyann
Copy link

panyann commented Jul 16, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants