Inside your project in Angular :
npm install --save jquery jstree
npm install --save-dev @types/jquery @types/jstree
Add into angular.json:
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"
Add installed type sets to tsconfig.app.json:
{
...
"compilerOptions": {
...
"types": ["chrome", "jquery", "jstree"]
},
...
}
Example in your component.html:
<div id="jstree">
<ul>
<li>Root node 1
<ul>
<li id="child_node_1">Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Root node 2</li>
</ul>
</div>
<button>demo button</button>
In your component.ts
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 {
title = 'tree';
ngOnInit(): void {
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
}
}
