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

After I created using angular-cli application.

Then I installed:

npm i @types/jstree --save-dev

And that's on setup, then I tried to use it and no luck.

Please can someone show me how to use that 3rd party library with typescript

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!