- De TreeView.js zet je in de assets/js folder. Een eventuele TreeView.css zet je in de assets/css folder.
- In de tsconfig.json zet je allowJs op true:
"compilerOptions": {
"allowJs": true
}
Door deze setting kan er gewone Javascript geïmporteerd worden. - in de .angular-cli.json moet je de styles en scripts nodes uitbreiden met verwijzingen naar de .css en .js bestanden van je javascript TreeView.
"styles": [
"assets/css/TreeView.css",
"assets/css/bootstrap.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"assets/js/TreeView.js"
], - De TreeView.js moet je uitbreiden met exports, zoals hieronder beschreven:
var TreeView = (function () {
"use strict";
function tree(settings) {
var nodes, self = this;
function init() { }
self.getNodes = getNodes;
init();
}
return tree;
})();
if (typeof exports !== 'undefined') {
exports.Tree = TreeView;
} - In dezelfde directory als je javascript TreeView.js zet je een bestand genaamd TreeView.d.ts neer. Daarin staat:
export declare class Tree {
private settings;
constructor(settings: any);
addNode(data: any): void;
findNodeOnLabel(label: string) : any;
...
} - In de tree.component.ts (het angular component waarmee je een TreeView kunt neerzetten) doe je:
import { Component, OnInit, ElementRef } from '@angular/core';
import { Tree } from './../../assets/js/TreeView'
import * as $ from 'jquery';
@Component({
selector: 'my-tree',
templateUrl: './tree.component.html',
styleUrls: ['./tree.component.css']
})
export class TreeComponent implements OnInit {
constructor(private el: ElementRef) { }
tree: Tree;
ngOnInit() {
this.tree = new Tree({ checkboxes: false, initialOpenCloseState: "closed" });
$(this.el.nativeElement).append(this.tree.getDOMElement());
}
addNode(dict: any) {
this.tree.addNode(dict);
}
}
Dat was het. Je ziet dat Typescript normale javascript kan importeren in het angular component. In de javascript heb ik alleen de constructie "if (typeof exports !== 'undefined') { exports.Tree = TreeView; }" moeten toevoegen, omdat anders Typescript de javascript niet als module herkend. Tevens zorgt de if constructie ervoor dat de javascript file ook in de browser werkt.
