add sidebar buttons

src/app/app.component.html

@@ -11,6 +11,11 @@
         <ion-list>
           <ion-list-header>
             Navigate
+            <ion-buttons class="ion-padding-end">
+              <ion-button fill="outline" color="light"><ion-icon color="primary" name="add-circle"></ion-icon></ion-button>
+              <ion-button fill="outline" color="light"><ion-icon color="primary" name="add-circle"></ion-icon>&nbsp;<span style="color: #666;">Child</span></ion-button>
+              <ion-button fill="outline" color="light"><ion-icon color="danger" name="trash"></ion-icon></ion-button>
+            </ion-buttons>
           </ion-list-header>
 
           <tree-root [nodes]="nodes" [options]="options"></tree-root>
@@ -34,4 +39,4 @@
       </ion-content>
     </div>
   </ion-split-pane>
-</ion-app>
+</ion-app>

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { ApiService } from './service/api.service';
 import {Router} from '@angular/router';
+import { TREE_ACTIONS } from 'angular-tree-component';
 
 @Component({
   selector: 'app-root',
@@ -21,6 +22,10 @@ export class AppComponent implements OnInit {
           console.log({tree, node, $event});
           const id = node.data.id;
           this.router.navigate(['/editor', {id}]);
+        },
+        click: (tree, node, $event) => {
+          console.log('click', {tree, node, $event});
+          TREE_ACTIONS.FOCUS(tree, node, $event);
         }
       }
     }