changes has done at home, make component recursive and begin to put the tree images

Author: David Martínez Ros

src/app/app.component.ts

@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
 
- title = 'app works!';
+ title = 'The Component Tree Project!';
 
  constructor() {}
 

src/app/node-tree/node-tree.component.html

@@ -1,16 +1,9 @@
-<table border=1>
- <tr>
- <td>
- <h3>Id: {{ node.id }}</h3>
- </td>
- <td> 
- <h3>name: {{ node.name }}</h3>
- </td>
- <td>
- <h3>IdParent: {{ node.idParent }}</h3>
- </td>
- <td>
- <h3>sheet: {{ node.sheet }}</h3>
- </td>
- </tr>
-</table>
+<div id="{{ node.id }}">
+ <img *ngIf="!last" src="../assets/line_node_and_continue.png" (click)="clickExpandCollapse()"/>
+ <img *ngIf="last" src="../assets/line_node_and_end.png" (click)="clickExpandCollapse()"/>
+ <img *ngIf="!node.sheet && node.expand" src="../assets/collapse_icon.png" (click)="clickExpandCollapse()"/>
+ <img *ngIf="!node.sheet && !node.expand" src="../assets/expand_icon.png" (click)="clickExpandCollapse()"/>
+ <img *ngIf="node.sheet" src="../assets/line_sheet.png" (click)="clickExpandCollapse()"/>
+
+ <span><b>{{ node.name }}</b> el seu pare es: {{ node.idParent }}</span>
+</div>

src/app/node-tree/node-tree.component.ts

@@ -11,9 +11,15 @@ export class NodeTreeComponent implements OnInit {
 
  @Input() node: Node;
 
+ @Input() last: boolean;
+
  constructor() { }
 
  ngOnInit() {
  }
 
+ clickExpandCollapse() {
+ this.node.expand = !this.node.expand;
+ }
+
 }

src/app/node.class.ts

@@ -3,4 +3,8 @@ export class Node {
  name: string;
  idParent: number;
  sheet: boolean;
+
+ childs: Node[];
+
+ expand: boolean = false;
 }

src/app/tree/tree.component.html

@@ -1,3 +1,10 @@
-<div *ngFor="let node of tree | async">
- <app-node-tree [node]="node"></app-node-tree> 
+<div *ngFor="let node of tree | async; let i of index">
+ <app-node-tree [node]="node" [last]="i == tree.length"></app-node-tree>
+ <div *ngIf="!node.sheet">
+ <div *ngIf="node.expand" style="padding-left:10px">
+ <div *ngFor="let child of node.childs; let j of index">
+ <app-node-tree [node]="child" [last]="j == node.childs.length"></app-node-tree>
+ </div>
+ </div>
+ </div> 
 </div>