feat(components): add tree view component

package.json

@@ -43,7 +43,7 @@
     "ng2-bootstrap": "1.1.16-11",
     "ng2-ckeditor": "1.1.5",
     "ng2-smart-table": "^0.3.2",
-    "ng2-tree": "^0.0.2-7",
+    "ng2-tree": "^2.0.0-alpha.0",
     "ngx-uploader": "^2.0.24",
     "normalize.css": "^4.1.1",
     "reflect-metadata": "^0.1.9",

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

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'components',
+  template: `<router-outlet></router-outlet>`
+})
+export class Components {
+
+  constructor() {
+  }
+
+}

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

@@ -0,0 +1,24 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+import { TreeModule } from 'ng2-tree';
+
+import { routing }       from './components.routing';
+import { Components } from './components.component';
+import { TreeView } from './components/treeView/treeView.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgaModule,
+    TreeModule,
+    routing
+  ],
+  declarations: [
+    Components,
+    TreeView,
+  ]
+})
+export class ComponentsModule {}

src/app/pages/components/components.routing.ts

@@ -0,0 +1,17 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Components } from './components.component';
+import { TreeView } from './components/treeView/treeView.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Components,
+    children: [
+      { path: 'treeview', component: TreeView }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/pages/components/components.scss

@@ -0,0 +1 @@
+@import '../../theme/sass/treeView';

src/app/pages/components/components/treeView/index.ts

@@ -0,0 +1 @@
+export * from './treeView.component';

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

@@ -0,0 +1,36 @@
+import {Component} from '@angular/core';
+import {TreeModel} from 'ng2-tree';
+
+@Component({
+  selector: 'tree-view',
+  templateUrl: './treeView.html',
+})
+
+export class TreeView {
+
+  tree: TreeModel = {
+    value: 'Programming languages by programming paradigm',
+    children: [
+      {
+        value: 'Object-oriented programming',
+        children: [
+          {value: 'Java'},
+          {value: 'C++'},
+          {value: 'C#'},
+        ]
+      },
+      {
+        value: 'Prototype-based programming',
+        children: [
+          {value: 'JavaScript'},
+          {value: 'CoffeeScript'},
+          {value: 'Lua'},
+        ]
+      }
+    ]
+  };
+
+  constructor() {
+  }
+
+}

src/app/pages/components/components/treeView/treeView.html

@@ -0,0 +1,5 @@
+<div class="col-md-6">
+  <ba-card title="basic">
+    <tree id="tree-view" [tree]="tree"></tree>
+  </ba-card>
+</div>

src/app/pages/components/index.ts

@@ -0,0 +1 @@
+export * from './components.component';

src/app/pages/pages.menu.ts

@@ -36,28 +36,28 @@ export const PAGES_MENU = [
           }
         ]
       },
-      // {
+      {
-      //   path: 'components',
+        path: 'components',
-      //   data: {
+        data: {
-      //     menu: {
+          menu: {
-      //       title: 'Components',
+            title: 'Components',
-      //       icon: 'ion-gear-a',
+            icon: 'ion-gear-a',
-      //       selected: false,
+            selected: false,
-      //       expanded: false,
+            expanded: false,
-      //       order: 250,
+            order: 250,
-      //     }
+          }
-      //   },
+        },
-      //   children: [
+        children: [
-      //     {
+          {
-      //       path: 'treeview',
+            path: 'treeview',
-      //       data: {
+            data: {
-      //         menu: {
+              menu: {
-      //           title: 'Tree View',
+                title: 'Tree View',
-      //         }
+              }
-      //       }
+            }
-      //     }
+          }
-      //   ]
+        ]
-      // },
+      },
       {
         path: 'charts',
         data: {

src/app/pages/pages.routing.ts

@@ -21,6 +21,7 @@ export const routes: Routes = [
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
       { path: 'dashboard', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule' },
       { path: 'editors', loadChildren: 'app/pages/editors/editors.module#EditorsModule' },
+      { path: 'components', loadChildren: 'app/pages/components/components.module#ComponentsModule' },
       { path: 'charts', loadChildren: 'app/pages/charts/charts.module#ChartsModule' },
       { path: 'ui', loadChildren: 'app/pages/ui/ui.module#UiModule' },
       { path: 'forms', loadChildren: 'app/pages/forms/forms.module#FormsModule' },