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

  

    
Root node 1
      

        
Child node 1
        
Child node 2
      
    
  

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!