address comments

Author: tinayuangao

src/demo-app/tree/tree-demo.html

@@ -43,7 +43,7 @@
             </button>
             {{node.key}}
           </div>
-          <ul [class]="nestedTreeControl.isExpanded(node) ? '' : 'tree-demo-invisible'">
+          <ul [class.tree-demo-invisible]="!nestedTreeControl.isExpanded(node)">
             <ng-container matTreeNodeOutlet></ng-container>
           </ul>
         </li>

src/demo-app/tree/tree-demo.ts

@@ -14,7 +14,6 @@ import {of as ofObservable} from 'rxjs/observable/of';
 import {JsonNode, JsonDatabase} from './json-database';
 import {JsonFlatNode} from './flat-data-source';
 
-
 @Component({
   moduleId: module.id,
   selector: 'tree-demo',
@@ -48,7 +47,6 @@ export class TreeDemo {
     this.nestedDataSource = new MatTreeNestedDataSource();
 
     database.dataChange.subscribe(data => {
-      console.log(`datachanges in demo`)
       this.dataSource.data = data;
       this.nestedDataSource.data = data;
     })

src/material-examples/tree-flat-overview/tree-flat-overview-example.css

@@ -1,8 +1,5 @@
-.tree-demo-invisible {
-  display: none;
-}
-
-ul, li {
+.example-tree ul,
+.example-tree li {
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   list-style-type: none;

src/material-examples/tree-flat-overview/tree-flat-overview-example.html

@@ -1,4 +1,4 @@
-<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
   <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
     {{node.key}} : {{node.value}}
   </mat-tree-node>

src/material-examples/tree-flat-overview/tree-flat-overview-example.ts

@@ -4,6 +4,7 @@ import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material-experim
 import {of} from 'rxjs/observable/of';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 
+/** Json node data with nested structure. Each node has a key and a value or a list of children. */
 export class JsonNode {
   children: JsonNode[];
   key: string;
@@ -18,6 +19,10 @@ export class JsonFlatNode {
   expandable: boolean;
 }
 
+
+/**
+ * The Json tree data in string. The data could be parsed into Json object
+ */
 const TREE_DATA = `{"Tina":
   {
     "Documents": {
@@ -55,6 +60,11 @@ const TREE_DATA = `{"Tina":
     }
 }}`;
 
+/**
+ * Json database, it can build a tree structured Json object from string.
+ * The input will be a json object string, and the output is a list of `JsonNode` with nested
+ * structure.
+ */
 @Injectable()
 export class JsonDatabase {
   dataChange: BehaviorSubject<JsonNode[]> = new BehaviorSubject<JsonNode[]>([]);
@@ -66,11 +76,21 @@ export class JsonDatabase {
   }
 
   initialize() {
+    // Parse the string to json object.
     const dataObject = JSON.parse(TREE_DATA);
+
+    // Build the tree nodes from Json object. The result is a list of `JsonNode` with nested
+    //     Json node as children.
     const data = this.buildJsonTree(dataObject, 0);
+
+    // Notify the change.
     this.dataChange.next(data);
   }
 
+  /**
+   * Build the Json tree. The `value` is the Json object, or a sub-tree of a Json object.
+   * The return value is the list of `JsonNode`.
+   */
   buildJsonTree(value: any, level: number) {
     let data: any[] = [];
     for (let k in value) {

src/material-examples/tree-nested-overview/tree-nested-overview-example.css

@@ -1,8 +1,9 @@
-.tree-demo-invisible {
+.example-tree-invisible {
   display: none;
 }
 
-ul, li {
+.example-tree ul,
+.example-tree li {
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   list-style-type: none;

src/material-examples/tree-nested-overview/tree-nested-overview-example.html

@@ -1,4 +1,4 @@
-<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
+<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
   <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
     <li>
       <div>{{node.key}}:  {{node.value}}</div>
@@ -16,7 +16,7 @@
         </button>
         {{node.key}}
       </div>
-      <ul [class]="nestedTreeControl.isExpanded(node) ? '' : 'tree-demo-invisible'">
+      <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
         <ng-container matTreeNodeOutlet></ng-container>
       </ul>
     </li>

src/material-examples/tree-nested-overview/tree-nested-overview-example.ts

@@ -4,12 +4,18 @@ import {MatTreeNestedDataSource} from '@angular/material-experimental/tree';
 import {of} from 'rxjs/observable/of';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 
+/**
+ * Json node data with nested structure. Each node has a key and a value or a list of children
+ */
 export class JsonNode {
   children: JsonNode[];
   key: string;
   value: any;
 }
 
+/**
+ * The Json tree data in string. The data could be parsed into Json object
+ */
 const TREE_DATA = `{"Tina":
   {
     "Documents": {
@@ -47,6 +53,11 @@ const TREE_DATA = `{"Tina":
     }
 }}`;
 
+/**
+ * Json database, it can build a tree structured Json object from string.
+ * The input will be a json object string, and the output is a list of `JsonNode` with nested
+ * structure.
+ */
 @Injectable()
 export class JsonDatabase {
   dataChange: BehaviorSubject<JsonNode[]> = new BehaviorSubject<JsonNode[]>([]);
@@ -58,11 +69,21 @@ export class JsonDatabase {
   }
 
   initialize() {
+    // Parse the string to json object.
     const dataObject = JSON.parse(TREE_DATA);
+
+    // Build the tree nodes from Json object. The result is a list of `JsonNode` with nested
+    //     Json node as children.
     const data = this.buildJsonTree(dataObject, 0);
+
+    // Notify the change.
     this.dataChange.next(data);
   }
 
+  /**
+   * Build the Json tree. The `value` is the Json object, or a sub-tree of a Json object.
+   * The return value is the list of `JsonNode`.
+   */
   buildJsonTree(value: any, level: number) {
     let data: any[] = [];
     for (let k in value) {
@@ -100,13 +121,10 @@ export class TreeNestedOverviewExample {
     this.nestedTreeControl = new NestedTreeControl<JsonNode>(this._getChildren);
     this.nestedDataSource = new MatTreeNestedDataSource();
 
-    database.dataChange.subscribe(data => {
-      this.nestedDataSource.data = data;
-    })
+    database.dataChange.subscribe(data => this.nestedDataSource.data = data);
   }
 
   private _getChildren = (node: JsonNode) => { return of(node.children); };
 
-
   hasNestedChild = (_: number, nodeData: JsonNode) => {return !(nodeData.value); };
 }