feat(app\components): create tree view component

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

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {RouteConfig} from '@angular/router-deprecated';
+import {TreeView} from "./components/treeView";
+
+@Component({
+  selector: 'components',
+  pipes: [],
+  providers: [],
+  styles: [],
+  template: `<router-outlet></router-outlet>`
+})
+@RouteConfig([
+  {
+    name: 'TreeView',
+    component: TreeView,
+    path: '/tree-view',
+    useAsDefault: true
+  }
+])
+export class Components {
+
+  constructor() {
+  }
+
+}

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,37 @@
+import {Component} from '@angular/core';
+import {BranchyComponent, TreeModel} from 'ng2-branchy';
+import {BaCard} from "../../../../theme/components/baCard/baCard.component";
+
+@Component({
+  selector: 'tree-view',
+  directives: [BranchyComponent, BaCard],
+  template: require('./treeView.html'),
+})
+
+export class TreeView {
+
+  constructor() {
+  }
+  private 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'},
+        ]
+      }
+    ]
+  };
+
+}

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

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

src/app/pages/components/index.ts

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

src/app/pages/pages.component.ts

@@ -10,6 +10,7 @@ import {Charts} from './charts';
 import {Forms} from './forms';
 import {Tables} from './tables';
 import {Editors} from "./editors";
+import {Components} from "./components/components.component";
 
 @Component({
   selector: 'pages',
@@ -52,6 +53,11 @@ import {Editors} from "./editors";
     path: '/dashboard',
     useAsDefault: true,
   },
+  {
+    name: 'Components',
+    component: Components,
+    path: '/components/...'
+  },
   {
     name: 'Ui',
     component: Ui,