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

Have you checked your package.json? .... If it contains @types/jstree in dependencies array than your 3rd party library is installed. Otherwise type manually "@types/jstree":"x.x.x"(version) and run npm install. — Shreenil Patel
– Shreenil Patel, Commented Jul 8, 2017 at 19:56
@ShreenilPatel Dude I've done it. It's not the first project I do. But it's doesn't load any of the jstree.min.js dependencies — hackp0int
– hackp0int, Commented Jul 9, 2017 at 7:56

Derek J. · Accepted Answer · 2019-03-16 02:46:00Z

13

+50

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!

edited Mar 16, 2019 at 2:46

Derek J.

1,5001 gold badge16 silver badges24 bronze badges

answered Jul 11, 2017 at 16:22

peinearydevelopment

11.5k5 gold badges52 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brad Bird Over a year ago

This is so useful for other jQuery components too!

N.K Over a year ago

Its not working properly : stackblitz.com/edit/jstree-demo Can you help , where i am wrong ?

peinearydevelopment Over a year ago

@N.K Honestly, I'm not sure...sorry. I do have a full repo on GitHub that might help you though. It has two ways of accomplishing this. One is similar to my answer above(all of the relevant lines are commented out). The uncommented out version though is probably the more correct approach.

e-cloud · Accepted Answer · 2017-07-11 15:51:17Z

0

@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.

answered Jul 11, 2017 at 15:51

e-cloud

4,5012 gold badges25 silver badges38 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related