added side tree

package-lock.json

@@ -1728,6 +1728,17 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular-tree-component": {
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/angular-tree-component/-/angular-tree-component-8.5.2.tgz",
+      "integrity": "sha512-3NwMB+vLq1+WHz2UVgsZA73E1LmIIWJlrrasCKXbLJ3S7NmY9O/wKcolji3Vp2W//5KQ33RXu1jiPXCOQdRzVA==",
+      "requires": {
+        "lodash": "^4.17.11",
+        "mobx": "^5.14.2",
+        "mobx-angular": "3.0.3",
+        "opencollective-postinstall": "^2.0.2"
+      }
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -6514,8 +6525,7 @@
     "lodash": {
       "version": "4.17.15",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
-      "dev": true
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
@@ -6989,6 +6999,16 @@
         }
       }
     },
+    "mobx": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.15.4.tgz",
+      "integrity": "sha512-xRFJxSU2Im3nrGCdjSuOTFmxVDGeqOHL+TyADCGbT0k4HHqGmx5u2yaHNryvoORpI4DfbzjJ5jPmuv+d7sioFw=="
+    },
+    "mobx-angular": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/mobx-angular/-/mobx-angular-3.0.3.tgz",
+      "integrity": "sha512-mZuuose70V+Sd0hMWDElpRe3mA6GhYjSQN3mHzqk2XWXRJ+eWQa/f3Lqhw+Me/Xd2etWsGR1hnRa1BfQ2ZDtpw=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -7461,6 +7481,11 @@
         "is-wsl": "^1.1.0"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
+      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw=="
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
+    "angular-tree-component": "^8.5.2",
     "core-js": "^2.5.4",
     "rxjs": "~6.5.1",
     "tslib": "^1.9.0",

src/app/app.component.html

@@ -1,7 +1,7 @@
 <ion-app>
   <ion-split-pane contentId="main-content">
     <ion-menu contentId="main-content" type="overlay">
-      <ion-header>
+      <!-- <ion-header>
         <ion-toolbar>
           <ion-title>Menu</ion-title>
         </ion-toolbar>
@@ -17,7 +17,8 @@
             </ion-item>
           </ion-menu-toggle>
         </ion-list>
-      </ion-content>
+      </ion-content> -->
+      <tree-root [nodes]="nodes" [options]="options"></tree-root>
     </ion-menu>
     <ion-router-outlet id="main-content"></ion-router-outlet>
   </ion-split-pane>

src/app/app.component.ts

@@ -1,30 +1,53 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
-import { Platform } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { Platform } from "@ionic/angular";
+import { SplashScreen } from "@ionic-native/splash-screen/ngx";
+import { StatusBar } from "@ionic-native/status-bar/ngx";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.scss']
+  selector: "app-root",
+  templateUrl: "app.component.html",
+  styleUrls: ["app.component.scss"]
 })
 export class AppComponent {
   public appPages = [
     {
-      title: 'Home',
-      url: '/home',
-      icon: 'home'
+      title: "Home",
+      url: "/home",
+      icon: "home"
     },
     {
-      title: 'List',
-      url: '/list',
-      icon: 'list'
+      title: "List",
+      url: "/list",
+      icon: "list"
     },
     {
-      title: 'Editor',
-      url: '/editor',
-      icon: 'edit'
+      title: "Editor",
+      url: "/editor",
+      icon: "edit"
+    }
+  ];
+
+  public nodes = [
+    {
+      id: 1,
+      name: "root1",
+      children: [
+        { id: 2, name: "child1" },
+        { id: 3, name: "child2" }
+      ]
+    },
+    {
+      id: 4,
+      name: "root2",
+      children: [
+        { id: 5, name: "child2.1" },
+        {
+          id: 6,
+          name: "child2.2",
+          children: [{ id: 7, name: "subsub" }]
+        }
+      ]
     }
   ];
 

src/app/app.module.ts

@@ -1,15 +1,16 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouteReuseStrategy } from '@angular/router';
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { RouteReuseStrategy } from "@angular/router";
 
-import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
+import { SplashScreen } from "@ionic-native/splash-screen/ngx";
+import { StatusBar } from "@ionic-native/status-bar/ngx";
 
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
-import {HttpClientModule} from '@angular/common/http';
-import {ComponentsModule} from './components/components.module';
+import { AppComponent } from "./app.component";
+import { AppRoutingModule } from "./app-routing.module";
+import { HttpClientModule } from "@angular/common/http";
+import { ComponentsModule } from "./components/components.module";
+import { TreeModule } from "angular-tree-component";
 
 @NgModule({
   declarations: [AppComponent],
@@ -20,6 +21,7 @@ import {ComponentsModule} from './components/components.module';
     AppRoutingModule,
     HttpClientModule,
     ComponentsModule,
+    TreeModule.forRoot()
   ],
   providers: [
     StatusBar,

src/app/components/components.module.ts

@@ -1,15 +1,11 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {HostComponent} from './editor/host/host.component';
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { HostComponent } from "./editor/host/host.component";
 
 @NgModule({
   declarations: [HostComponent],
-  imports: [
-    CommonModule
-  ],
+  imports: [CommonModule],
   entryComponents: [HostComponent],
-  exports: [
-    HostComponent
-  ]
+  exports: [HostComponent]
 })
 export class ComponentsModule {}

src/global.scss

@@ -16,7 +16,7 @@
 @import "~@ionic/angular/css/normalize.css";
 @import "~@ionic/angular/css/structure.css";
 @import "~@ionic/angular/css/typography.css";
-@import '~@ionic/angular/css/display.css';
+@import "~@ionic/angular/css/display.css";
 
 /* Optional CSS utils that can be commented out */
 @import "~@ionic/angular/css/padding.css";
@@ -24,3 +24,5 @@
 @import "~@ionic/angular/css/text-alignment.css";
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
+
+@import "~angular-tree-component/dist/angular-tree-component.css";