feat(components): add a tree view page

package.json

@@ -53,6 +53,7 @@
     "leaflet": "1.0.3",
     "ng2-charts": "1.5.0",
     "ng2-ckeditor": "1.1.6",
+    "ng2-tree": "2.0.0-alpha.5",
     "normalize.css": "6.0.0",
     "roboto-fontface": "0.7.0",
     "rxjs": "5.4.0",

src/app/@theme/styles/cosmic/cosmic.theme.scss

@@ -33,3 +33,7 @@ $theme-name: 'cosmic';
 // @nga/charts module styles
 @import '~@nga/theme/overrides/charts/styles/themes/nga.theme.default';
 @include nga-charts($theme-name);
+
+// @nga/components module styles
+@import '~@nga/theme/overrides/components/styles/themes/nga.theme.default';
+@include nga-components($theme-name);

src/app/@theme/styles/default/default.theme.scss

@@ -32,3 +32,7 @@ $theme-name: 'default';
 // @nga/charts module styles
 @import '~@nga/theme/overrides/charts/styles/themes/nga.theme.default';
 @include nga-charts($theme-name);
+
+// @nga/components module styles
+@import '~@nga/theme/overrides/components/styles/themes/nga.theme.default';
+@include nga-components($theme-name);

src/app/@theme/styles/light/light.theme.scss

@@ -32,3 +32,7 @@ $theme-name: 'light';
 // @nga/charts module styles
 @import '~@nga/theme/overrides/charts/styles/themes/nga.theme.default';
 @include nga-charts($theme-name);
+
+// @nga/components module styles
+@import '~@nga/theme/overrides/components/styles/themes/nga.theme.default';
+@include nga-components($theme-name);

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

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ComponentsComponent } from './components.component';
+import { TreeComponent } from './tree/tree.component';
+
+const routes: Routes = [{
+  path: '',
+  component: ComponentsComponent,
+  children: [{
+    path: 'tree',
+    component: TreeComponent,
+  }],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ComponentsRoutingModule { }
+
+export const routedComponents = [
+  ComponentsComponent,
+  TreeComponent,
+];

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

@@ -3,9 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-components',
   template: `
-    <p>
-      components works!
-    </p>
+    <router-outlet></router-outlet>
   `,
 })
 export class ComponentsComponent {

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { NgaComponentsModule } from '@nga/theme';
+
+import { SharedModule } from '../../shared.module';
+
+import { ComponentsRoutingModule, routedComponents } from './components-routing.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    NgaComponentsModule,
+    ComponentsRoutingModule,
+  ],
+  declarations: [
+    ...routedComponents,
+  ],
+})
+export class ComponentsModule { }

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

@@ -0,0 +1,10 @@
+<div class="row">
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>Tree</nga-card-header>
+      <nga-card-body>
+        <tree [tree]="tree"></tree>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>

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

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { TreeModel } from 'ng2-tree';
+
+@Component({
+  selector: 'ngx-tree',
+  templateUrl: './tree.component.html',
+})
+export class TreeComponent {
+
+  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/pages-menu.ts

@@ -36,7 +36,10 @@ export const menuItems: List<NgaMenuItem> = List([{
 }, {
   title: 'Components',
   icon: 'ion ion-ios-gear-outline',
-  link: '/pages/components',
+  children: List<NgaMenuItem>([{
+    title: 'Tree',
+    link: '/pages/components/tree',
+  }]),
 }, {
   title: 'Maps',
   icon: 'ion ion-ios-location-outline',

src/app/pages/pages-routing.module.ts

@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { ComponentsComponent } from './components/components.component';
 import { ChartsComponent } from './charts/charts.component';
 
 const routes: Routes = [{
@@ -17,7 +16,7 @@ const routes: Routes = [{
     loadChildren: './ui-features/ui-features.module#UiFeaturesModule',
   }, {
     path: 'components',
-    component: ComponentsComponent,
+    loadChildren: './components/components.module#ComponentsModule',
   }, {
     path: 'maps',
     loadChildren: './maps/maps.module#MapsModule',

src/app/pages/pages.module.ts

@@ -8,12 +8,10 @@ import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { PagesRoutingModule } from './pages-routing.module';
 import { ThemeModule } from '../@theme/theme.module';
-import { ComponentsComponent } from './components/components.component';
 
 const PAGES_COMPONENTS = [
   PagesComponent,
   DashboardComponent,
-  ComponentsComponent,
 ];
 
 @NgModule({

yarn.lock

@@ -3613,6 +3613,10 @@ ng2-ckeditor@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/ng2-ckeditor/-/ng2-ckeditor-1.1.6.tgz#fa3afb86982b725f7f3a609924c64821c2719875"
 
+ng2-tree@2.0.0-alpha.5:
+  version "2.0.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/ng2-tree/-/ng2-tree-2.0.0-alpha.5.tgz#197f33af92f16f4a9168a3394ed0cbf9c1708a4a"
+
 no-case@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"