feat(node removal): implement remove action in the node menu

Author: Georgii Rychko

components/ng2-tree.component.ts

@@ -6,9 +6,9 @@ import {EditableNodeDirective} from './editable-node.directive.ts';
 @Component({
   selector: 'ng2-tree',
   template: `
-      <ul class="tree" (keyup)="cancelActions($event)">
+      <ul *ngIf="tree" class="tree" (keyup)="cancelActions($event)">
         <li>
-          <div (mouseup)="showMenu($event)">
+          <div (contextmenu)="showMenu($event)">
             <span class="folding" (click)="switchFolding($event, tree)" [ngClass]="foldingType(tree)"></span>
             <span class="node-value" *ngIf="!edit">{{tree.value}}</span>
             <input type="text" class="node-value" editable [nodeValue]="tree.value" (valueChanged)="applyNewValue($event, tree)" *ngIf="edit"/>
@@ -17,7 +17,7 @@ import {EditableNodeDirective} from './editable-node.directive.ts';
             <ul class="node-menu-content">
               <li (click)="rename($event, tree)">Rename node</li>
               <li>Add node</li>
-              <li>Remove node</li>
+              <li (click)="remove($event, tree)">Remove node</li>
             </ul>          
           </div>
           <ng2-tree *ngFor="#child of tree.children" [tree]="child"></ng2-tree>
@@ -95,7 +95,14 @@ export class Ng2Tree implements OnInit {
     }
   }
 
-  private showMenu($event: any): void {
+  private remove($event: any, node: any) {
+    if ($event.which === 1) {
+      this.treeService.emitRemoveEvent({node});
+      this.isMenuVisible = false;
+    }
+  }
+
+  private showMenu($event: MouseEvent): void {
     if ($event.which === 3) {
       this.isMenuVisible = !this.isMenuVisible;
       this.treeService.emitMenuEvent({sender: this, action: 'close'})
@@ -119,5 +126,18 @@ export class Ng2Tree implements OnInit {
           this.isMenuVisible = false;
         }
       })
+    
+    this.treeService.removeNodeEventStream()
+      .subscribe(removeEvent => {
+        if (!this.tree || !this.tree.children) return;
+        for (let i = 0; i < this.tree.children.length; i++) {
+          const child = this.tree.children[i];
+          if (child === removeEvent.node) {
+            delete this.tree.children[i];
+            
+            break;
+          }
+        }
+      })
   }
 }

components/ng2-tree.service.ts

@@ -5,6 +5,7 @@ import {Observable} from 'rxjs/Observable';
 export class Ng2TreeService {
     private menuEvents$:EventEmitter<any> = new EventEmitter();
     private cancelEvents$:EventEmitter<any> = new EventEmitter();
+    private removeEvents$:EventEmitter<any> = new EventEmitter();
 
     menuEventStream(): Observable<any> {
       return this.menuEvents$;
@@ -13,6 +14,15 @@ export class Ng2TreeService {
     emitMenuEvent(event: any): void {
       this.menuEvents$.emit(event);
     }
+    
+    
+    removeNodeEventStream(): Observable<any> {
+      return this.removeEvents$;
+    }
+    
+    emitRemoveEvent(event: any): void {
+      this.removeEvents$.emit(event);
+    }
 
     cancelEventStream(): Observable<any> {
       return this.cancelEvents$;

package.json

@@ -11,7 +11,7 @@
   "author": "rychko.georgiy@gmail.com",
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.12",
+    "angular2": "2.0.0-beta.13",
     "es6-shim": "0.35.0",
     "lodash": "4.6.1",
     "reflect-metadata": "0.1.2",

tsconfig.json

@@ -14,9 +14,6 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true
   },
-  "exclude": [
-    "node_modules"
-  ],
   "files": [
     "typings/main.d.ts"
   ]