feat(*): add ability to pass a template to the tree for nodes rendering

* templates can be used for rendering nodes

* removed diagnostics

* template example for demo app

* tests for tree templates

Author: robertjanetzko

src/demo/app/app.component.ts

@@ -78,6 +78,23 @@ declare const alertify: any;
           </button>
         </div>
       </div>
+      <div class="tree-container">
+        <div class="tree-info"><p class="tree-title">Programming languages tree</p>
+          <p class="notice">this tree is using a custom template</p></div>
+        <div class="tree-content">
+          <tree [tree]="icons"
+                [settings]="settings"
+                (nodeRemoved)="onNodeRemoved($event)"
+                (nodeRenamed)="onNodeRenamed($event)"
+                (nodeSelected)="onNodeSelected($event)"
+                (nodeMoved)="onNodeMoved($event)"
+                (nodeCreated)="onNodeCreated($event)">
+            <ng-template let-node>
+              <i class="fa {{node.icon}}"></i> <span class="node-name" [innerHTML]="node.value"></span>
+            </ng-template>
+          </tree>
+        </div>
+      </div>
     </div>
   `,
   styles: [`
@@ -439,6 +456,39 @@ export class AppComponent implements OnInit {
 
   @ViewChild('treeFFS') public treeFFS;
 
+  public icons: TreeModel = {
+    value: 'Icons',
+    children: [
+      {
+        value: 'Web Application Icons',
+        children: [
+          {value: 'calendar', icon: 'fa-calendar' },
+          {value: 'download', icon: 'fa-download' },
+          {value: 'group', icon: 'fa-group' },
+          {value: 'print', icon: 'fa-print' }
+        ]
+      },
+      {
+        value: 'Hand Icons',
+        children: [
+          {value: 'pointer', icon: 'fa-hand-pointer-o' },
+          {value: 'grab', icon: 'fa-hand-rock-o' },
+          {value: 'thumbs up', icon: 'fa-thumbs-o-up ' },
+          {value: 'thumbs down', icon: 'fa-thumbs-o-down' }
+        ]
+      },
+      {
+        value: 'File Type Icons',
+        children: [
+          {value: 'file', icon: 'fa-file-o' },
+          {value: 'audio', icon: 'fa-file-audio-o' },
+          {value: 'movie', icon: 'fa-file-movie-o ' },
+          {value: 'archive', icon: 'fa-file-zip-o' }
+        ]
+      },
+   ]
+  };
+
   private static logEvent(e: NodeEvent, message: string): void {
     console.log(e);
     alertify.message(`${message}: ${e.node.value}`);

src/tree-internal.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, TemplateRef, Inject, Input, OnDestroy, OnInit } from '@angular/core';
 import * as TreeTypes from './tree.types';
 import { Tree } from './tree';
 import { TreeController } from './tree-controller';
@@ -29,8 +29,9 @@ import { get } from './utils/fn.utils';
           [class.node-selected]="isSelected"
           (click)="onNodeSelected($event)">
             <div *ngIf="tree.nodeTemplate" class="node-template" [innerHTML]="tree.nodeTemplate | safeHtml"></div>
-            <span class="node-name" [innerHTML]="tree.value | safeHtml"></span>
+            <span *ngIf="!template" class="node-name" [innerHTML]="tree.value | safeHtml"></span>
             <span class="loading-children" *ngIf="tree.childrenAreBeingLoaded()"></span>
+            <ng-template [ngTemplateOutlet]="template" [ngOutletContext]="{ $implicit: tree.node }"></ng-template>
         </div>
 
         <input type="text" class="node-value"
@@ -48,7 +49,7 @@ import { get } from './utils/fn.utils';
       <node-menu *ngIf="isRightMenuVisible" (menuItemSelected)="onMenuItemSelected($event)"></node-menu>
 
       <ng-template [ngIf]="tree.isNodeExpanded()">
-        <tree-internal *ngFor="let child of tree.childrenAsync | async" [tree]="child"></tree-internal>
+        <tree-internal *ngFor="let child of tree.childrenAsync | async" [tree]="child" [template]="template"></tree-internal>
       </ng-template>
     </li>
   </ul>
@@ -61,6 +62,9 @@ export class TreeInternalComponent implements OnInit, OnDestroy {
   @Input()
   public settings: TreeTypes.Ng2TreeSettings;
 
+  @Input()
+  public template: TemplateRef<any>;
+
   public isSelected = false;
   public isRightMenuVisible = false;
   public isLeftMenuVisible = false;

src/tree.component.ts

@@ -1,6 +1,6 @@
 import {
   Input, Component, OnInit, EventEmitter, Output, Inject, OnChanges, SimpleChanges, ViewChild,
-  OnDestroy
+  OnDestroy, TemplateRef, ContentChild
 } from '@angular/core';
 import { TreeService } from './tree.service';
 import * as TreeTypes from './tree.types';
@@ -11,7 +11,7 @@ import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'tree',
-  template: `<tree-internal #rootComponent [tree]="tree" [settings]="settings"></tree-internal>`,
+  template: `<tree-internal #rootComponent [tree]="tree" [settings]="settings" [template]="template"></tree-internal>`,
   providers: [TreeService]
 })
 export class TreeComponent implements OnInit, OnChanges, OnDestroy {
@@ -52,6 +52,8 @@ public loadNextLevel: EventEmitter<any> = new EventEmitter();
   public tree: Tree;
   @ViewChild('rootComponent') public rootComponent;
 
+  @ContentChild(TemplateRef) public template;
+
   private subscriptions: Subscription[] = [];
 
   public constructor(@Inject(TreeService) private treeService: TreeService) {

src/tree.types.ts

@@ -25,7 +25,8 @@ export interface TreeModel {
   emitLoadNextLevel?: boolean;
   _status?: TreeStatus;
   _foldingType?: FoldingType;
-  }
+  [additionalData: string]: any;
+}
 
 export interface CssClasses {
   /* The class or classes that should be added to the expanded node */

test/template.tree-internal.component.spec.ts

@@ -0,0 +1,72 @@
+import { TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Component, ElementRef, DebugElement } from '@angular/core';
+import { TreeInternalComponent } from '../src/tree-internal.component';
+import { TreeComponent } from '../src/tree.component';
+import { TreeModel, Ng2TreeSettings } from '../src/tree.types';
+import { TreeService } from '../src/tree.service';
+import { NodeMenuService } from '../src/menu/node-menu.service';
+import { NodeMenuComponent } from '../src/menu/node-menu.component';
+import { NodeDraggableService } from '../src/draggable/node-draggable.service';
+import { NodeDraggableDirective } from '../src/draggable/node-draggable.directive';
+import { NodeEditableDirective } from '../src/editable/node-editable.directive';
+import { NodeMenuAction } from '../src/menu/menu.events';
+import * as EventUtils from '../src/utils/event.utils';
+import { CapturedNode } from '../src/draggable/captured-node';
+import { SafeHtmlPipe } from '../src/utils/safe-html.pipe';
+
+let fixture;
+let masterInternalTreeEl;
+let masterComponentInstance;
+
+const tree: TreeModel = {
+  value: 'Master', icon: 'icon0',
+  children: [
+    {value: 'Servant#1', icon: 'icon1'},
+    {value: 'Servant#2', icon: 'icon2'}
+  ]
+};
+
+@Component({
+  template: `<div><tree id="master" [tree]="tree"><ng-template let-node><span class="icon">{{node.icon}}</span><span class="value">{{node.value}}</span></ng-template></tree></div>`
+})
+class TestComponent {
+  public tree: TreeModel = tree;
+  public constructor(public treeHolder: ElementRef) {}
+}
+
+describe('template for tree', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent, TreeInternalComponent, TreeComponent, NodeEditableDirective, NodeMenuComponent, NodeDraggableDirective, SafeHtmlPipe],
+      providers: [NodeMenuService, NodeDraggableService, TreeService]
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+
+    masterInternalTreeEl = fixture.debugElement.query(By.css('#master')).query(By.directive(TreeInternalComponent));
+    masterComponentInstance = masterInternalTreeEl.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it('should not render default node', () => {
+    const foldingEl: DebugElement[] = masterInternalTreeEl.queryAll(By.css('.node-name'));
+    expect(foldingEl.length).toEqual(0);
+  });
+
+  it('should render the template', () => {
+    const icons: DebugElement[] = masterInternalTreeEl.queryAll(By.css('.icon'));
+    expect(icons.length).toEqual(3);
+    expect(icons[0].nativeElement.innerHTML).toEqual('icon0');
+    expect(icons[1].nativeElement.innerHTML).toEqual('icon1');
+    expect(icons[2].nativeElement.innerHTML).toEqual('icon2');
+
+    const values: DebugElement[] = masterInternalTreeEl.queryAll(By.css('.value'));
+    expect(values.length).toEqual(3);
+    expect(values[0].nativeElement.innerHTML).toEqual('Master');
+    expect(values[1].nativeElement.innerHTML).toEqual('Servant#1');
+    expect(values[2].nativeElement.innerHTML).toEqual('Servant#2');
+  });
+
+});