added side tree

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 { }
+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";