fix(tree.component): make sure tree can be loaded asynchronously

Author: rychkog

demo/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NodeEvent, TreeModel, RenamableNode, Ng2TreeSettings } from '../index';
 
 require('../src/styles.css');
@@ -10,7 +10,7 @@ declare const alertify: any;
   template: `
     <div class="tree-demo-app">
       <div class="tree-container">
-        <p>Fonts tree</p>
+        <p class="tree-title">Fonts tree</p>
         <tree
           [tree]="fonts"
           (nodeRemoved)="onNodeRemoved($event)"
@@ -21,7 +21,8 @@ declare const alertify: any;
         </tree>
       </div>
       <div class="tree-container">
-        <p>Programming languages tree</p>
+        <p class="tree-title">Programming languages tree</p>
+        <p class="notice">this tree is loaded asynchronously</p>
         <tree
           [tree]="pls"
           [settings]="settings"
@@ -46,13 +47,18 @@ declare const alertify: any;
       vertical-align: top;
       width: 500px;
     }
-    .tree-demo-app .tree-container p {
+    .tree-title {
       color: #40a070;
       font-size: 2em;
     }
+    .notice {
+      color: #e91e63;
+      font-size: 1.2em;
+      font-style: italic;
+    }
   `]
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   public settings: Ng2TreeSettings = {
     rootIsVisible: false
   };
@@ -66,85 +72,91 @@ export class AppComponent {
           'static': true
         },
         children: [
-          {value: 'Antiqua'},
-          {value: 'DejaVu Serif'},
-          {value: 'Garamond'},
-          {value: 'Georgia'},
-          {value: 'Times New Roman'},
+          { value: 'Antiqua' },
+          { value: 'DejaVu Serif' },
+          { value: 'Garamond' },
+          { value: 'Georgia' },
+          { value: 'Times New Roman' },
           {
             value: 'Slab serif',
             children: [
-              {value: 'Candida'},
-              {value: 'Swift'},
-              {value: 'Guardian Egyptian'}
+              { value: 'Candida' },
+              { value: 'Swift' },
+              { value: 'Guardian Egyptian' }
             ]
           }
         ]
       },
       {
         value: 'Sans-serif',
         children: [
-          {value: 'Arial'},
-          {value: 'Century Gothic'},
-          {value: 'DejaVu Sans'},
-          {value: 'Futura'},
-          {value: 'Geneva'},
-          {value: 'Liberation Sans'}
+          { value: 'Arial' },
+          { value: 'Century Gothic' },
+          { value: 'DejaVu Sans' },
+          { value: 'Futura' },
+          { value: 'Geneva' },
+          { value: 'Liberation Sans' }
         ]
       },
       {
         value: 'Monospace',
         children: [
-          {value: 'Input Mono'},
-          {value: 'Roboto Mono'},
-          {value: 'Liberation Mono'},
-          {value: 'Hack'},
-          {value: 'Consolas'},
-          {value: 'Menlo'},
-          {value: 'Source Code Pro'}
+          { value: 'Input Mono' },
+          { value: 'Roboto Mono' },
+          { value: 'Liberation Mono' },
+          { value: 'Hack' },
+          { value: 'Consolas' },
+          { value: 'Menlo' },
+          { value: 'Source Code Pro' }
         ]
       }
     ]
   };
 
-  public pls: TreeModel = {
-    value: 'Programming languages by programming paradigm',
-    children: [
-      {
-        value: 'Aspect-oriented programming',
-        children: [
-          {value: 'AspectJ'},
-          {value: 'AspectC++'}
-        ]
-      },
-      {
-        value: 'Object-oriented programming',
+  public pls: TreeModel;
+
+  public ngOnInit(): void {
+    setTimeout(() => {
+      this.pls = {
+        value: 'Programming languages by programming paradigm',
         children: [
           {
-            value: {
-              name: 'Java',
-              setName(name: string): void {
-                this.name = name;
+            value: 'Aspect-oriented programming',
+            children: [
+              { value: 'AspectJ' },
+              { value: 'AspectC++' }
+            ]
+          },
+          {
+            value: 'Object-oriented programming',
+            children: [
+              {
+                value: {
+                  name: 'Java',
+                  setName(name: string): void {
+                    this.name = name;
+                  },
+                  toString(): string {
+                    return this.name;
+                  }
+                } as RenamableNode
               },
-              toString(): string {
-                return this.name;
-              }
-            } as RenamableNode
+              { value: 'C++' },
+              { value: 'C#' }
+            ]
           },
-          {value: 'C++'},
-          {value: 'C#'}
-        ]
-      },
-      {
-        value: 'Prototype-based programming',
-        children: [
-          {value: 'JavaScript'},
-          {value: 'CoffeeScript'},
-          {value: 'TypeScript'}
+          {
+            value: 'Prototype-based programming',
+            children: [
+              { value: 'JavaScript' },
+              { value: 'CoffeeScript' },
+              { value: 'TypeScript' }
+            ]
+          }
         ]
-      }
-    ]
-  };
+      };
+    }, 2000);
+  }
 
   public onNodeRemoved(e: NodeEvent): void {
     AppComponent.logEvent(e, 'Removed');

src/tree.component.ts

@@ -1,4 +1,4 @@
-import { Input, Component, OnInit, EventEmitter, Output, Inject } from '@angular/core';
+import { Input, Component, OnInit, EventEmitter, Output, Inject, OnChanges, SimpleChanges } from '@angular/core';
 import { TreeService } from './tree.service';
 import { TreeModel, Ng2TreeSettings } from './tree.types';
 import { NodeEvent } from './tree.events';
@@ -9,7 +9,9 @@ import { Tree } from './tree';
   template: `<tree-internal [tree]="tree" [settings]="settings"></tree-internal>`,
   providers: [TreeService]
 })
-export class TreeComponent implements OnInit {
+export class TreeComponent implements OnInit, OnChanges {
+  private static EMPTY_TREE: Tree = new Tree({value: ''});
+
   /* tslint:disable:no-input-rename */
   @Input('tree')
   public treeModel: TreeModel;
@@ -38,9 +40,15 @@ export class TreeComponent implements OnInit {
   public constructor(@Inject(TreeService) private treeService: TreeService) {
   }
 
-  public ngOnInit(): void {
-    this.tree = Tree.buildTreeFromModel(this.treeModel);
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (!this.treeModel) {
+      this.tree = TreeComponent.EMPTY_TREE;
+    } else {
+      this.tree = Tree.buildTreeFromModel(this.treeModel);
+    }
+  }
 
+  public ngOnInit(): void {
     this.treeService.nodeRemoved$.subscribe((e: NodeEvent) => {
       this.nodeRemoved.emit(e);
     });