How to add jstree to angular 2 application using typescript with @types/jstree

Question

Hi I believe it\'s some kind of a newbee question, but I\'m new to ng2 so please bear with me...

I\'ve done:

npm i jstree --save

Af

Answer 1

Here are the steps I took to get it to work. I started with a new cli application.

npm install --save jquery jstree

npm install --save-dev @types/jquery @types/jstree

I then updated the angular.json file, if you are using an older version of angular-cli, makes changes to the angular-cli.json file. I added "../node_modules/jstree/dist/themes/default-dark/style.min.css" to the styles property array.

I also added two items into the scripts property array: "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jstree/dist/jstree.min.js"

I then updated src/app/app.component.html to

<div id="foo">
  <ul>
    <li>Root node 1
      <ul>
        <li>Child node 1</li>
        <li><a href="#">Child node 2</a></li>
      </ul>
    </li>
  </ul>
</div>

I also update src/app/app.component.ts to

import { Component, OnInit } from '@angular/core';

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    $('#foo').jstree();
  }
}

Hope this helps!

Answer 2

The answer of derek works for me i just have to Modify my angular.json like this

Styles:

node_modules/jstree/dist/themes/default/style.min.css

Scripts:

"node_modules/jquery/dist/jquery.min.js",
"node_modules/jstree/dist/jstree.min.js"

Answer 3

@IamStalker, it seems that i know what the problem is. But can you present more code to show how you want to use it?

---

As jstree depends on jQuery, you have to import it too.

You may have to use scripts config.

Here is the reference: https://github.com/angular/angular-cli/wiki/stories-global-scripts.