doc(tree):simplify tree example (#14718)

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

@@ -24,7 +24,7 @@ import {ChecklistTreeDemo} from './checklist-tree-demo/checklist-tree-demo';
 import {ChecklistNestedTreeDemo} from './checklist-tree-demo/checklist-nested-tree-demo';
 import {DynamicTreeDemo} from './dynamic-tree-demo/dynamic-tree-demo';
 import {LoadmoreTreeDemo} from './loadmore-tree-demo/loadmore-tree-demo';
-
+import {ExamplePageModule} from '../example/example-module';
 
 @NgModule({
   imports: [
@@ -39,6 +39,7 @@ import {LoadmoreTreeDemo} from './loadmore-tree-demo/loadmore-tree-demo';
     MatInputModule,
     MatTreeModule,
     MatProgressBarModule,
+    ExamplePageModule,
   ],
   declarations: [
     ChecklistNestedTreeDemo,

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

@@ -1,93 +1,19 @@
 <mat-accordion class="demo-tree-container">
-
   <mat-expansion-panel>
-    <mat-expansion-panel-header>Flattened tree</mat-expansion-panel-header>
-    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
-        <button mat-icon-button disabled></button>
-        {{node.filename}} : {{node.type}}
-      </mat-tree-node>
-      <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
-        <button mat-icon-button matTreeNodeToggle
-                [attr.aria-label]="'toggle ' + node.filename">
-          <mat-icon class="mat-icon-rtl-mirror">
-            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-          </mat-icon>
-        </button>
-        {{node.filename}} : {{node.type}}
-      </mat-tree-node>
-    </mat-tree>
+    <mat-expansion-panel-header>Flat tree</mat-expansion-panel-header>
+    <material-example id="tree-flat-overview"></material-example>
+  </mat-expansion-panel>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>CDK Flat tree</mat-expansion-panel-header>
+    <material-example id="cdk-tree-flat"></material-example>
   </mat-expansion-panel>
-
   <mat-expansion-panel>
     <mat-expansion-panel-header>Nested tree</mat-expansion-panel-header>
-    <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
-      <mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
-        <li class="mat-tree-node">
-          <button mat-icon-button disabled></button>
-          {{node.filename}}:  {{node.type}}
-        </li>
-      </mat-nested-tree-node>
-      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
-        <li>
-          <div class="mat-tree-node">
-            <button mat-icon-button matTreeNodeToggle
-                    [attr.aria-label]="'toggle ' + node.filename">
-              <mat-icon class="mat-icon-rtl-mirror">
-                {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-              </mat-icon>
-            </button>
-            {{node.filename}}
-          </div>
-          <ul [class.demo-tree-invisible]="!nestedTreeControl.isExpanded(node)">
-            <ng-container matTreeNodeOutlet></ng-container>
-          </ul>
-        </li>
-      </mat-nested-tree-node>
-    </mat-tree>
+    <material-example id="tree-nested-overview"></material-example>
   </mat-expansion-panel>
-
-  <mat-expansion-panel>
-    <mat-expansion-panel-header>CDK Flattened tree</mat-expansion-panel-header>
-    <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
-      <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="demo-tree-node">
-        <button mat-icon-button disabled></button>
-        {{node.filename}}:  {{node.type}}
-      </cdk-tree-node>
-      <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
-                     class="demo-tree-node">
-        <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
-                cdkTreeNodeToggle>
-          <mat-icon class="mat-icon-rtl-mirror">
-            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-          </mat-icon>
-        </button>
-        {{node.filename}}:  {{node.type}}
-      </cdk-tree-node>
-    </cdk-tree>
-  </mat-expansion-panel>
-
   <mat-expansion-panel>
     <mat-expansion-panel-header>CDK Nested tree</mat-expansion-panel-header>
-    <cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
-      <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="demo-tree-node">
-        <button mat-icon-button disabled></button>
-        {{node.filename}}:  {{node.type}}
-      </cdk-nested-tree-node>
-      <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="demo-tree-node">
-        <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
-                cdkTreeNodeToggle>
-          <mat-icon class="mat-icon-rtl-mirror">
-            {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-          </mat-icon>
-        </button>
-        {{node.filename}}:  {{node.type}}
-        <div [class.demo-tree-invisible]="!nestedTreeControl.isExpanded(node)"
-             class="demo-tree-nested-node">
-          <ng-container cdkTreeNodeOutlet></ng-container>
-        </div>
-      </cdk-nested-tree-node>
-    </cdk-tree>
+    <material-example id="cdk-tree-nested"></material-example>
   </mat-expansion-panel>
 
   <mat-expansion-panel>
@@ -106,7 +32,7 @@
   </mat-expansion-panel>
 
   <mat-expansion-panel>
-    <mat-expansion-panel-header>Loadmore flat tree</mat-expansion-panel-header>
+    <mat-expansion-panel-header>Load more flat tree</mat-expansion-panel-header>
     <loadmore-tree-demo></loadmore-tree-demo>
   </mat-expansion-panel>
 

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

@@ -5,72 +5,12 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
-import {FlatTreeControl, NestedTreeControl} from '@angular/cdk/tree';
 import {Component} from '@angular/core';
-import {
-  MatTreeFlatDataSource,
-  MatTreeFlattener,
-  MatTreeNestedDataSource
-} from '@angular/material/tree';
-import {FileDatabase, FileFlatNode, FileNode} from './file-database';
-
 
 @Component({
   moduleId: module.id,
   selector: 'tree-demo',
   templateUrl: 'tree-demo.html',
   styleUrls: ['tree-demo.css'],
-  providers: [FileDatabase]
 })
-export class TreeDemo {
-  // Flat tree control
-  treeControl: FlatTreeControl<FileFlatNode>;
-
-  // Nested tree control
-  nestedTreeControl: NestedTreeControl<FileNode>;
-
-  treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
-
-  // Flat tree data source
-  dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
-
-  // Nested tree data source
-  nestedDataSource: MatTreeNestedDataSource<FileNode>;
-
-  constructor(database: FileDatabase) {
-    this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
-                                              this.isExpandable, this.getChildren);
-    // For flat tree
-    this.treeControl = new FlatTreeControl<FileFlatNode>(this.getLevel, this.isExpandable);
-    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
-
-    // For nested tree
-    this.nestedTreeControl = new NestedTreeControl<FileNode>(this.getChildren);
-    this.nestedDataSource = new MatTreeNestedDataSource();
-
-    database.dataChange.subscribe(data => {
-      this.dataSource.data = data;
-      this.nestedDataSource.data = data;
-    });
-  }
-
-  transformer = (node: FileNode, level: number) => {
-    const flatNode = new FileFlatNode();
-    flatNode.filename = node.filename;
-    flatNode.type = node.type;
-    flatNode.level = level;
-    flatNode.expandable = !!node.children;
-    return flatNode;
-  }
-
-  getLevel = (node: FileFlatNode) => { return node.level; };
-
-  isExpandable = (node: FileFlatNode) => { return node.expandable; };
-
-  getChildren = (node: FileNode): FileNode[] => { return node.children; };
-
-  hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
-
-  hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
-}
+export class TreeDemo {}

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

@@ -1,14 +1,24 @@
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
-  <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="example-tree-node">
+  <!-- This is the tree node template for leaf nodes -->
+  <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
+                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 class="example-tree-node">
+    <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
-    {{node.filename}}:  {{node.type}}
+    {{node.name}}
   </cdk-tree-node>
-  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
+  <!-- This is the tree node template for expandable nodes -->
+  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
+                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 class="example-tree-node">
+    <button mat-icon-button cdkTreeNodeToggle
+            [attr.aria-label]="'toggle ' + node.filename"
+            (click)="node.isExpanded = !node.isExpanded"
+            [style.visibility]="node.expandable ? 'visible' : 'hidden'">
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
-    {{node.filename}}:  {{node.type}}
+    {{node.name}}
   </cdk-tree-node>
 </cdk-tree>

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

@@ -1,113 +1,62 @@
+import {ArrayDataSource} from '@angular/cdk/collections';
 import {FlatTreeControl} from '@angular/cdk/tree';
-import {Component, Injectable} from '@angular/core';
-import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
-import {BehaviorSubject, Observable, of as observableOf} from 'rxjs';
+import {Component} from '@angular/core';
 
-/**
- * File node data with nested structure.
- * Each node has a filename, and a type or a list of children.
- */
-export class FileNode {
-  children: FileNode[];
-  filename: string;
-  type: any;
-}
+
+const TREE_DATA: ExampleFlatNode[] = [
+  {
+    name: 'Fruit',
+    expandable: true,
+    level: 0,
+  }, {
+    name: 'Apple',
+    expandable: false,
+    level: 1,
+  }, {
+    name: 'Banana',
+    expandable: false,
+    level: 1,
+  }, {
+    name: 'Fruit loops',
+    expandable: false,
+    level: 1,
+  }, {
+    name: 'Vegetables',
+    expandable: true,
+    level: 0,
+  }, {
+    name: 'Green',
+    expandable: true,
+    level: 1,
+  }, {
+    name: 'Broccoli',
+    expandable: false,
+    level: 2,
+  }, {
+    name: 'Brussel sprouts',
+    expandable: false,
+    level: 2,
+  }, {
+    name: 'Orange',
+    expandable: true,
+    level: 1,
+  }, {
+    name: 'Pumpkins',
+    expandable: false,
+    level: 2,
+  }, {
+    name: 'Carrots',
+    expandable: false,
+    level: 2,
+  }
+];
 
 /** Flat node with expandable and level information */
-export class FileFlatNode {
-  constructor(
-    public expandable: boolean, public filename: string, public level: number, public type: any) {}
-}
-
-/**
- * The file structure tree data in string. The data could be parsed into a Json object
- */
-const TREE_DATA = JSON.stringify({
-  Applications: {
-    Calendar: 'app',
-    Chrome: 'app',
-    Webstorm: 'app'
-  },
-  Documents: {
-    angular: {
-      src: {
-        compiler: 'ts',
-        core: 'ts'
-      }
-    },
-    material2: {
-      src: {
-        button: 'ts',
-        checkbox: 'ts',
-        input: 'ts'
-      }
-    }
-  },
-  Downloads: {
-    October: 'pdf',
-    November: 'pdf',
-    Tutorial: 'html'
-  },
-  Pictures: {
-    'Photo Booth Library': {
-      Contents: 'dir',
-      Pictures: 'dir'
-    },
-    Sun: 'png',
-    Woods: 'jpg'
-  }
-});
-
-/**
- * File database, it can build a tree structured Json object from string.
- * Each node in Json object represents a file or a directory. For a file, it has filename and type.
- * For a directory, it has filename and children (a list of files or directories).
- * The input will be a json object string, and the output is a list of `FileNode` with nested
- * structure.
- */
-@Injectable()
-export class FileDatabase {
-  dataChange = new BehaviorSubject<FileNode[]>([]);
-
-  get data(): FileNode[] { return this.dataChange.value; }
-
-  constructor() {
-    this.initialize();
-  }
-
-  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 `FileNode` with nested
-    //     file node as children.
-    const data = this.buildFileTree(dataObject, 0);
-
-    // Notify the change.
-    this.dataChange.next(data);
-  }
-
-  /**
-   * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
-   * The return value is the list of `FileNode`.
-   */
-  buildFileTree(obj: {[key: string]: any}, level: number): FileNode[] {
-    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
-      const value = obj[key];
-      const node = new FileNode();
-      node.filename = key;
-
-      if (value != null) {
-        if (typeof value === 'object') {
-          node.children = this.buildFileTree(value, level + 1);
-        } else {
-          node.type = value;
-        }
-      }
-
-      return accumulator.concat(node);
-    }, []);
-  }
+interface ExampleFlatNode {
+  expandable: boolean;
+  name: string;
+  level: number;
+  isExpanded?: boolean;
 }
 
 /**
@@ -117,33 +66,29 @@ export class FileDatabase {
   selector: 'cdk-tree-flat-example',
   templateUrl: 'cdk-tree-flat-example.html',
   styleUrls: ['cdk-tree-flat-example.css'],
-  providers: [FileDatabase]
 })
 export class CdkTreeFlatExample {
-  treeControl: FlatTreeControl<FileFlatNode>;
-  treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
-  dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
+  treeControl = new FlatTreeControl<ExampleFlatNode>(
+      node => node.level, node => node.expandable);
 
-  constructor(database: FileDatabase) {
-    this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,
-      this._isExpandable, this._getChildren);
-    this.treeControl = new FlatTreeControl<FileFlatNode>(this._getLevel, this._isExpandable);
-    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+  dataSource = new ArrayDataSource(TREE_DATA);
 
-    database.dataChange.subscribe(data => {
-      this.dataSource.data = data;
-    });
+  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
+
+  getParentNode(node: ExampleFlatNode) {
+    const nodeIndex = TREE_DATA.indexOf(node);
+
+    for (let i = nodeIndex - 1; i >= 0; i--) {
+      if (TREE_DATA[i].level === node.level - 1) {
+        return TREE_DATA[i];
+      }
+    }
+
+    return null;
   }
 
-  hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable;
-
-  transformer = (node: FileNode, level: number) => {
-    return new FileFlatNode(!!node.children, node.filename, level, node.type);
+  shouldRender(node: ExampleFlatNode) {
+    const parent = this.getParentNode(node);
+    return !parent || parent.isExpanded;
   }
-
-  private _getLevel = (node: FileFlatNode) => node.level;
-
-  private _isExpandable = (node: FileFlatNode) => node.expandable;
-
-  private _getChildren = (node: FileNode): Observable<FileNode[]> => observableOf(node.children);
 }

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

@@ -8,8 +8,10 @@
   margin-bottom: 0;
   list-style-type: none;
 }
-
 .example-tree-node {
   display: block;
+}
+
+.example-tree-node .example-tree-node {
   padding-left: 40px;
 }

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

@@ -1,16 +1,19 @@
-<cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
+<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
+  <!-- This is the tree node template for leaf nodes -->
   <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node">
+    <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
-    {{node.filename}}:  {{node.type}}
+    {{node.name}}
   </cdk-nested-tree-node>
-  <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
+  <!-- This is the tree node template for expandable nodes -->
+  <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasChild" class="example-tree-node">
+    <button mat-icon-button [attr.aria-label]="'toggle ' + node.name" cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
-        {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
-    {{node.filename}}:  {{node.type}}
-    <div [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
+    {{node.name}}
+    <div [class.example-tree-invisible]="!treeControl.isExpanded(node)">
       <ng-container cdkTreeNodeOutlet></ng-container>
     </div>
   </cdk-nested-tree-node>

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

@@ -1,107 +1,43 @@
+import {ArrayDataSource} from '@angular/cdk/collections';
+import {Component} from '@angular/core';
 import {NestedTreeControl} from '@angular/cdk/tree';
-import {Component, Injectable} from '@angular/core';
-import {MatTreeNestedDataSource} from '@angular/material/tree';
-import {BehaviorSubject, of as observableOf} from 'rxjs';
 
 /**
- * Json node data with nested structure. Each node has a filename and a value or a list of children
+ * Food data with nested structure.
+ * Each node has a name and an optiona list of children.
  */
-export class FileNode {
-  children: FileNode[];
-  filename: string;
-  type: any;
+interface FoodNode {
+  name: string;
+  children?: FoodNode[];
 }
 
-/**
- * The Json tree data in string. The data could be parsed into Json object
- */
-const TREE_DATA = JSON.stringify({
-  Applications: {
-    Calendar: 'app',
-    Chrome: 'app',
-    Webstorm: 'app'
+const TREE_DATA: FoodNode[] = [
+  {
+    name: 'Fruit',
+    children: [
+      {name: 'Apple'},
+      {name: 'Banana'},
+      {name: 'Fruit loops'},
+    ]
+  }, {
+    name: 'Vegetables',
+    children: [
+      {
+        name: 'Green',
+        children: [
+          {name: 'Broccoli'},
+          {name: 'Brussel sprouts'},
+        ]
+      }, {
+        name: 'Orange',
+        children: [
+          {name: 'Pumpkins'},
+          {name: 'Carrots'},
+        ]
+      },
+    ]
   },
-  Documents: {
-    angular: {
-      src: {
-        compiler: 'ts',
-        core: 'ts'
-      }
-    },
-    material2: {
-      src: {
-        button: 'ts',
-        checkbox: 'ts',
-        input: 'ts'
-      }
-    }
-  },
-  Downloads: {
-    October: 'pdf',
-    November: 'pdf',
-    Tutorial: 'html'
-  },
-  Pictures: {
-    'Photo Booth Library': {
-      Contents: 'dir',
-      Pictures: 'dir'
-    },
-    Sun: 'png',
-    Woods: 'jpg'
-  }
-});
-
-/**
- * File database, it can build a tree structured Json object from string.
- * Each node in Json object represents a file or a directory. For a file, it has filename and type.
- * For a directory, it has filename and children (a list of files or directories).
- * The input will be a json object string, and the output is a list of `FileNode` with nested
- * structure.
- */
-@Injectable()
-export class FileDatabase {
-  dataChange = new BehaviorSubject<FileNode[]>([]);
-
-  get data(): FileNode[] { return this.dataChange.value; }
-
-  constructor() {
-    this.initialize();
-  }
-
-  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 `FileNode` with nested
-    //     file node as children.
-    const data = this.buildFileTree(dataObject, 0);
-
-    // Notify the change.
-    this.dataChange.next(data);
-  }
-
-  /**
-   * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
-   * The return value is the list of `FileNode`.
-   */
-  buildFileTree(obj: {[key: string]: any}, level: number): FileNode[] {
-    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
-      const value = obj[key];
-      const node = new FileNode();
-      node.filename = key;
-
-      if (value != null) {
-        if (typeof value === 'object') {
-          node.children = this.buildFileTree(value, level + 1);
-        } else {
-          node.type = value;
-        }
-      }
-
-      return accumulator.concat(node);
-    }, []);
-  }
-}
+];
 
 /**
  * @title Tree with nested nodes
@@ -110,20 +46,10 @@ export class FileDatabase {
   selector: 'cdk-tree-nested-example',
   templateUrl: 'cdk-tree-nested-example.html',
   styleUrls: ['cdk-tree-nested-example.css'],
-  providers: [FileDatabase]
 })
 export class CdkTreeNestedExample {
-  nestedTreeControl: NestedTreeControl<FileNode>;
-  nestedDataSource: MatTreeNestedDataSource<FileNode>;
+  treeControl = new NestedTreeControl<FoodNode> (node => node.children);
+  dataSource = new ArrayDataSource(TREE_DATA);
 
-  constructor(database: FileDatabase) {
-    this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
-    this.nestedDataSource = new MatTreeNestedDataSource();
-
-    database.dataChange.subscribe(data => this.nestedDataSource.data = data);
-  }
-
-  hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type;
-
-  private _getChildren = (node: FileNode) => observableOf(node.children);
+  hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
 }

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

@@ -1,16 +1,18 @@
 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
+  <!-- This is the tree node template for leaf nodes -->
+  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+    <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
-    {{node.filename}} : {{node.type}}
+    {{node.name}}
   </mat-tree-node>
-
+  <!-- This is the tree node template for expandable nodes -->
   <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
     <button mat-icon-button matTreeNodeToggle
-            [attr.aria-label]="'toggle ' + node.filename">
+            [attr.aria-label]="'toggle ' + node.name">
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
-    {{node.filename}} : {{node.type}}
+    {{node.name}}
   </mat-tree-node>
 </mat-tree>

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

@@ -1,113 +1,49 @@
 import {FlatTreeControl} from '@angular/cdk/tree';
-import {Component, Injectable} from '@angular/core';
+import {Component} from '@angular/core';
 import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
-import {BehaviorSubject, Observable, of as observableOf} from 'rxjs';
 
 /**
- * File node data with nested structure.
- * Each node has a filename, and a type or a list of children.
+ * Food data with nested structure.
+ * Each node has a name and an optiona list of children.
  */
-export class FileNode {
-  children: FileNode[];
-  filename: string;
-  type: any;
+interface FoodNode {
+  name: string;
+  children?: FoodNode[];
 }
 
+const TREE_DATA: FoodNode[] = [
+  {
+    name: 'Fruit',
+    children: [
+      {name: 'Apple'},
+      {name: 'Banana'},
+      {name: 'Fruit loops'},
+    ]
+  }, {
+    name: 'Vegetables',
+    children: [
+      {
+        name: 'Green',
+        children: [
+          {name: 'Broccoli'},
+          {name: 'Brussel sprouts'},
+        ]
+      }, {
+        name: 'Orange',
+        children: [
+          {name: 'Pumpkins'},
+          {name: 'Carrots'},
+        ]
+      },
+    ]
+  },
+];
+
 /** Flat node with expandable and level information */
-export class FileFlatNode {
-  constructor(
-    public expandable: boolean, public filename: string, public level: number, public type: any) {}
-}
-
-/**
- * The file structure tree data in string. The data could be parsed into a Json object
- */
-const TREE_DATA = JSON.stringify({
-  Applications: {
-    Calendar: 'app',
-    Chrome: 'app',
-    Webstorm: 'app'
-  },
-  Documents: {
-    angular: {
-      src: {
-        compiler: 'ts',
-        core: 'ts'
-      }
-    },
-    material2: {
-      src: {
-        button: 'ts',
-        checkbox: 'ts',
-        input: 'ts'
-      }
-    }
-  },
-  Downloads: {
-    October: 'pdf',
-    November: 'pdf',
-    Tutorial: 'html'
-  },
-  Pictures: {
-    'Photo Booth Library': {
-      Contents: 'dir',
-      Pictures: 'dir'
-    },
-    Sun: 'png',
-    Woods: 'jpg'
-  }
-});
-
-/**
- * File database, it can build a tree structured Json object from string.
- * Each node in Json object represents a file or a directory. For a file, it has filename and type.
- * For a directory, it has filename and children (a list of files or directories).
- * The input will be a json object string, and the output is a list of `FileNode` with nested
- * structure.
- */
-@Injectable()
-export class FileDatabase {
-  dataChange = new BehaviorSubject<FileNode[]>([]);
-
-  get data(): FileNode[] { return this.dataChange.value; }
-
-  constructor() {
-    this.initialize();
-  }
-
-  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 `FileNode` with nested
-    //     file node as children.
-    const data = this.buildFileTree(dataObject, 0);
-
-    // Notify the change.
-    this.dataChange.next(data);
-  }
-
-  /**
-   * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
-   * The return value is the list of `FileNode`.
-   */
-  buildFileTree(obj: {[key: string]: any}, level: number): FileNode[] {
-    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
-      const value = obj[key];
-      const node = new FileNode();
-      node.filename = key;
-
-      if (value != null) {
-        if (typeof value === 'object') {
-          node.children = this.buildFileTree(value, level + 1);
-        } else {
-          node.type = value;
-        }
-      }
-
-      return accumulator.concat(node);
-    }, []);
-  }
+interface ExampleFlatNode {
+  expandable: boolean;
+  name: string;
+  level: number;
 }
 
 /**
@@ -117,31 +53,27 @@ export class FileDatabase {
   selector: 'tree-flat-overview-example',
   templateUrl: 'tree-flat-overview-example.html',
   styleUrls: ['tree-flat-overview-example.css'],
-  providers: [FileDatabase]
 })
 export class TreeFlatOverviewExample {
-  treeControl: FlatTreeControl<FileFlatNode>;
-  treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
-  dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
-
-  constructor(database: FileDatabase) {
-    this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,
-      this._isExpandable, this._getChildren);
-    this.treeControl = new FlatTreeControl<FileFlatNode>(this._getLevel, this._isExpandable);
-    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
-
-    database.dataChange.subscribe(data => this.dataSource.data = data);
+  private transformer = (node: FoodNode, level: number) => {
+    return {
+      expandable: !!node.children && node.children.length > 0,
+      name: node.name,
+      level: level,
+    };
   }
 
-  transformer = (node: FileNode, level: number) => {
-    return new FileFlatNode(!!node.children, node.filename, level, node.type);
+  treeControl = new FlatTreeControl<ExampleFlatNode>(
+      node => node.level, node => node.expandable);
+
+  treeFlattener = new MatTreeFlattener(
+      this.transformer, node => node.level, node => node.expandable, node => node.children);
+
+  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+  constructor() {
+    this.dataSource.data = TREE_DATA;
   }
 
-  private _getLevel = (node: FileFlatNode) => node.level;
-
-  private _isExpandable = (node: FileFlatNode) => node.expandable;
-
-  private _getChildren = (node: FileNode): Observable<FileNode[]> => observableOf(node.children);
-
-  hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable;
+  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
 }

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

@@ -1,23 +1,25 @@
-<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
+<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
+  <!-- This is the tree node template for leaf nodes -->
   <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
     <li class="mat-tree-node">
+      <!-- use a disabled button to provide padding for tree leaf -->
       <button mat-icon-button disabled></button>
-      {{node.filename}}:  {{node.type}}
+      {{node.name}}
     </li>
   </mat-tree-node>
-
-  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
+  <!-- This is the tree node template for expandable nodes -->
+  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
     <li>
       <div class="mat-tree-node">
         <button mat-icon-button matTreeNodeToggle
-                [attr.aria-label]="'toggle ' + node.filename">
+                [attr.aria-label]="'toggle ' + node.name">
           <mat-icon class="mat-icon-rtl-mirror">
-            {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>
-        {{node.filename}}
+        {{node.name}}
       </div>
-      <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
+      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
         <ng-container matTreeNodeOutlet></ng-container>
       </ul>
     </li>

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

@@ -1,107 +1,43 @@
 import {NestedTreeControl} from '@angular/cdk/tree';
-import {Component, Injectable} from '@angular/core';
+import {Component} from '@angular/core';
 import {MatTreeNestedDataSource} from '@angular/material/tree';
-import {BehaviorSubject} from 'rxjs';
 
 /**
- * Json node data with nested structure. Each node has a filename and a value or a list of children
+ * Food data with nested structure.
+ * Each node has a name and an optiona list of children.
  */
-export class FileNode {
-  children: FileNode[];
-  filename: string;
-  type: any;
+interface FoodNode {
+  name: string;
+  children?: FoodNode[];
 }
 
-/**
- * The Json tree data in string. The data could be parsed into Json object
- */
-const TREE_DATA = JSON.stringify({
-  Applications: {
-    Calendar: 'app',
-    Chrome: 'app',
-    Webstorm: 'app'
+const TREE_DATA: FoodNode[] = [
+  {
+    name: 'Fruit',
+    children: [
+      {name: 'Apple'},
+      {name: 'Banana'},
+      {name: 'Fruit loops'},
+    ]
+  }, {
+    name: 'Vegetables',
+    children: [
+      {
+        name: 'Green',
+        children: [
+          {name: 'Broccoli'},
+          {name: 'Brussel sprouts'},
+        ]
+      }, {
+        name: 'Orange',
+        children: [
+          {name: 'Pumpkins'},
+          {name: 'Carrots'},
+        ]
+      },
+    ]
   },
-  Documents: {
-    angular: {
-      src: {
-        compiler: 'ts',
-        core: 'ts'
-      }
-    },
-    material2: {
-      src: {
-        button: 'ts',
-        checkbox: 'ts',
-        input: 'ts'
-      }
-    }
-  },
-  Downloads: {
-    October: 'pdf',
-    November: 'pdf',
-    Tutorial: 'html'
-  },
-  Pictures: {
-    'Photo Booth Library': {
-      Contents: 'dir',
-      Pictures: 'dir'
-    },
-    Sun: 'png',
-    Woods: 'jpg'
-  }
-});
-
-/**
- * File database, it can build a tree structured Json object from string.
- * Each node in Json object represents a file or a directory. For a file, it has filename and type.
- * For a directory, it has filename and children (a list of files or directories).
- * The input will be a json object string, and the output is a list of `FileNode` with nested
- * structure.
- */
-@Injectable()
-export class FileDatabase {
-  dataChange = new BehaviorSubject<FileNode[]>([]);
-
-  get data(): FileNode[] { return this.dataChange.value; }
-
-  constructor() {
-    this.initialize();
-  }
-
-  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 `FileNode` with nested
-    //     file node as children.
-    const data = this.buildFileTree(dataObject, 0);
-
-    // Notify the change.
-    this.dataChange.next(data);
-  }
-
-  /**
-   * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
-   * The return value is the list of `FileNode`.
-   */
-  buildFileTree(obj: {[key: string]: any}, level: number): FileNode[] {
-    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
-      const value = obj[key];
-      const node = new FileNode();
-      node.filename = key;
-
-      if (value != null) {
-        if (typeof value === 'object') {
-          node.children = this.buildFileTree(value, level + 1);
-        } else {
-          node.type = value;
-        }
-      }
-
-      return accumulator.concat(node);
-    }, []);
-  }
-}
+];
 
 /**
  * @title Tree with nested nodes
@@ -110,20 +46,14 @@ export class FileDatabase {
   selector: 'tree-nested-overview-example',
   templateUrl: 'tree-nested-overview-example.html',
   styleUrls: ['tree-nested-overview-example.css'],
-  providers: [FileDatabase]
 })
 export class TreeNestedOverviewExample {
-  nestedTreeControl: NestedTreeControl<FileNode>;
-  nestedDataSource: MatTreeNestedDataSource<FileNode>;
+  treeControl = new NestedTreeControl<FoodNode>(node => node.children);
+  dataSource = new MatTreeNestedDataSource<FoodNode>();
 
-  constructor(database: FileDatabase) {
-    this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
-    this.nestedDataSource = new MatTreeNestedDataSource();
-
-    database.dataChange.subscribe(data => this.nestedDataSource.data = data);
+  constructor() {
+    this.dataSource.data = TREE_DATA;
   }
 
-  hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type;
-
-  private _getChildren = (node: FileNode) => node.children;
+  hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
 }