How do I make bootstrap-treeview visible in an angular 4 project?
I am developing an Angular front-end and my first step is to integrate a bootstrap-treeview in a component.
I have added bootstrap-treeview.min.css, jquery.js and bootstrap-treeview.min.js in the angular-cli.json, then I put the referenced script-files and css files in the assets-directory.
I have followed the instructions of this tutorial.
ng build and ng serve compiles without errors, but the treeview is not visible in the component.
When I open the relevant component.html in a browser the treeview is visible and works to this point. I can expand the dropdown-list with the childs and select a link. But when I start the app by ng serve the component is empty.
import { Component, OnInit } from '@angular/core';
declare var jquery: any;
declare var $: any;
@Component({
selector: 'app-document-tree',
templateUrl: './document-tree.component.html',
styleUrls: ['./document-tree.component.css']
})
export class DocumentTreeComponent implements OnInit {
ngOnInit() {
}
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css"> -->
<link rel="stylesheet" href="../../../assets/bootstrap-treeview.min.css">
</head>
<body>
<h3>Tree-Component</h3>
<table border="5px" height="300px" width="200px">
<tr border="5px">
<td border="5px">
<div class="container" border="5px" height="600px" width="200px" >
<div id="tree" class="treeview" height="600px" width="200px" >
</div>
</div>
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> -->
<script src="../../../assets/bootstrap-treeview.min.js"></script>
<script>
var myTree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
$('#tree').treeview({ data: myTree });
</script>
</body>
</html>
