fix(tree): fix tree component, replace ng2-tree on the angular-tree-component

Closes #1690

angular.json

@@ -34,6 +34,7 @@
               "node_modules/font-awesome/scss/font-awesome.scss",
               "node_modules/socicon/css/socicon.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
+              "node_modules/angular-tree-component/dist/angular-tree-component.css",
               "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
               "src/app/@theme/styles/styles.scss"
             ],

package.json

@@ -45,6 +45,7 @@
     "@nebular/theme": "^2.0.0-rc.8",
     "@ng-bootstrap/ng-bootstrap": "1.0.0",
     "@swimlane/ngx-charts": "7.0.1",
+    "angular-tree-component": "7.2.0",
     "angular2-chartjs": "0.4.1",
     "angular2-toaster": "4.0.1",
     "bootstrap": "4.0.0",
@@ -60,7 +61,6 @@
     "nebular-icons": "1.0.6",
     "ng2-ckeditor": "1.1.13",
     "ng2-smart-table": "1.2.2",
-    "ng2-tree": "2.0.0-rc.4",
     "ngx-echarts": "2.0.1",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",

src/app/pages/components/components.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { TreeModule } from 'ng2-tree';
+import { TreeModule } from 'angular-tree-component';
 import { ToasterModule } from 'angular2-toaster';
 
 import { ThemeModule } from '../../@theme/theme.module';

src/app/pages/components/tree/tree.component.html

@@ -3,7 +3,7 @@
     <nb-card>
       <nb-card-header>Tree</nb-card-header>
       <nb-card-body>
-        <tree [tree]="tree"></tree>
+        <tree-root [nodes]="nodes"></tree-root>
       </nb-card-body>
     </nb-card>
   </div>

src/app/pages/components/tree/tree.component.scss

@@ -0,0 +1,20 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  /deep/ .angular-tree-component {
+    cursor: default;
+
+    .node-wrapper {
+      .node-content-wrapper {
+        background: none;
+        box-shadow: none;
+        cursor: default;
+      }
+
+      .toggle-children-wrapper {
+        cursor: pointer;
+      }
+    }
+  }
+}

src/app/pages/components/tree/tree.component.ts

@@ -1,33 +1,33 @@
 import { Component } from '@angular/core';
-import { TreeModel } from 'ng2-tree';
 
 @Component({
   selector: 'ngx-tree',
   templateUrl: './tree.component.html',
+  styleUrls: ['./tree.component.scss'],
 })
 export class TreeComponent {
 
-  tree: TreeModel = {
+  nodes = [{
-    value: 'Programming languages by programming paradigm',
+    name: 'Programming languages by programming paradigm',
     children: [{
-      value: 'Object-oriented programming',
+      name: 'Object-oriented programming',
       children: [{
-        value: 'Java',
+        name: 'Java',
       }, {
-        value: 'C++',
+        name: 'C++',
       }, {
-        value: 'C#',
+        name: 'C#',
       }],
     }, {
-      value: 'Prototype-based programming',
+      name: 'Prototype-based programming',
       children: [{
-        value: 'JavaScript',
+        name: 'JavaScript',
       }, {
-        value: 'CoffeeScript',
+        name: 'CoffeeScript',
       }, {
-        value: 'Lua',
+        name: 'Lua',
       }],
     }],
-  };
+  }];
 
 }