docs(tree): add cdk tree examples to material-examples (#10426)

src/cdk/tree/tree.md

@@ -7,6 +7,9 @@ these two types of trees.
 
 #### Flat tree
 
+<!-- example(cdk-tree-flat) -->
+
+
 In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead
 are rendered as siblings in sequence. An instance of `TreeFlattener` is used to generate the flat
 list of items from hierarchical data. The "level" of each tree node is read through the `getLevel`
@@ -28,6 +31,8 @@ variations, such as infinite or virtual scrolling.
 
 #### Nested tree
 
+<!-- example(cdk-tree-nested) -->
+
 In nested tree, children nodes are placed inside their parent node in DOM. The parent node contains
 a node outlet into which children are projected.
 

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

@@ -0,0 +1,4 @@
+.demo-tree-node {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,12 @@
+<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>{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon>
+    </button>
+    {{node.filename}}:  {{node.type}}
+  </cdk-tree-node>
+</cdk-tree>

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

@@ -0,0 +1,162 @@
+import {Component, Injectable} from '@angular/core';
+import {FlatTreeControl} from '@angular/cdk/tree';
+import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree';
+import {of} from 'rxjs/observable/of';
+import {Observable} from 'rxjs/Observable';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+
+/**
+ * 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;
+}
+
+/** Flat node with expandable and level information */
+export class FileFlatNode {
+  filename: string;
+  type: any;
+  level: number;
+  expandable: boolean;
+}
+
+/**
+ * The file structure tree data in string. The data could be parsed into a Json object
+ */
+const TREE_DATA = `
+  {
+    "Documents": {
+      "angular": {
+        "src": {
+          "core": "ts",
+          "compiler": "ts"
+        }
+      },
+      "material2": {
+        "src": {
+          "button": "ts",
+          "checkbox": "ts",
+          "input": "ts"
+        }
+      }
+    },
+    "Downloads": {
+        "Tutorial": "html",
+        "November": "pdf",
+        "October": "pdf"
+    },
+    "Pictures": {
+        "Sun": "png",
+        "Woods": "jpg",
+        "Photo Booth Library": {
+          "Contents": "dir",
+          "Pictures": "dir"
+        }
+    },
+    "Applications": {
+        "Chrome": "app",
+        "Calendar": "app",
+        "Webstorm": "app"
+    }
+}`;
+
+/**
+ * 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: BehaviorSubject<FileNode[]> = 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(value: any, level: number): FileNode[] {
+    let data: any[] = [];
+    for (let k in value) {
+      let v = value[k];
+      let node = new FileNode();
+      node.filename = `${k}`;
+      if (v === null || v === undefined) {
+        // no action
+      } else if (typeof v === 'object') {
+        node.children = this.buildFileTree(v, level + 1);
+      } else {
+        node.type = v;
+      }
+      data.push(node);
+    }
+    return data;
+  }
+}
+
+/**
+ * @title Tree with flat nodes
+ */
+@Component({
+  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>;
+
+  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;
+    });
+  }
+
+  transformer = (node: FileNode, level: number) => {
+    let flatNode = new FileFlatNode();
+    flatNode.filename = node.filename;
+    flatNode.type = node.type;
+    flatNode.level = level;
+    flatNode.expandable = !!node.children;
+    return flatNode;
+  }
+
+  private _getLevel = (node: FileFlatNode) => { return node.level; };
+
+  private _isExpandable = (node: FileFlatNode) => { return node.expandable; };
+
+  private _getChildren = (node: FileNode): Observable<FileNode[]> => { return of(node.children); };
+
+  hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
+}

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

@@ -0,0 +1,15 @@
+.example-tree-invisible {
+  display: none;
+}
+
+.example-tree ul,
+.example-tree li {
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style-type: none;
+}
+
+.example-tree-node {
+  display: block;
+  padding-left: 40px;
+}

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

@@ -0,0 +1,15 @@
+<cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
+  <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-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="example-tree-node">
+    <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
+      <mat-icon>{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon>
+    </button>
+    {{node.filename}}:  {{node.type}}
+    <div [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
+      <ng-container cdkTreeNodeOutlet></ng-container>
+    </div>
+  </cdk-nested-tree-node>
+</cdk-tree>

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

@@ -0,0 +1,132 @@
+import {Component, Injectable} from '@angular/core';
+import {NestedTreeControl} from '@angular/cdk/tree';
+import {MatTreeNestedDataSource} from '@angular/material/tree';
+import {of} from 'rxjs/observable/of';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+
+/**
+ * Json node data with nested structure. Each node has a filename and a value or a list of children
+ */
+export class FileNode {
+  children: FileNode[];
+  filename: string;
+  type: any;
+}
+
+/**
+ * The Json tree data in string. The data could be parsed into Json object
+ */
+const TREE_DATA = `
+  {
+    "Documents": {
+      "angular": {
+        "src": {
+          "core": "ts",
+          "compiler": "ts"
+        }
+      },
+      "material2": {
+        "src": {
+          "button": "ts",
+          "checkbox": "ts",
+          "input": "ts"
+        }
+      }
+    },
+    "Downloads": {
+        "Tutorial": "html",
+        "November": "pdf",
+        "October": "pdf"
+    },
+    "Pictures": {
+        "Sun": "png",
+        "Woods": "jpg",
+        "Photo Booth Library": {
+          "Contents": "dir",
+          "Pictures": "dir"
+        }
+    },
+    "Applications": {
+        "Chrome": "app",
+        "Calendar": "app",
+        "Webstorm": "app"
+    }
+  }`;
+
+/**
+ * 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: BehaviorSubject<FileNode[]> = 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(value: any, level: number): FileNode[] {
+    let data: any[] = [];
+    for (let k in value) {
+      let v = value[k];
+      let node = new FileNode();
+      node.filename = `${k}`;
+      if (v === null || v === undefined) {
+        // no action
+      } else if (typeof v === 'object') {
+        node.children = this.buildFileTree(v, level + 1);
+      } else {
+        node.type = v;
+      }
+      data.push(node);
+    }
+    return data;
+  }
+}
+
+/**
+ * @title Tree with nested nodes
+ */
+@Component({
+  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>;
+
+  constructor(database: FileDatabase) {
+    this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
+    this.nestedDataSource = new MatTreeNestedDataSource();
+
+    database.dataChange.subscribe(data => this.nestedDataSource.data = data);
+  }
+
+  private _getChildren = (node: FileNode) => { return of(node.children); };
+
+  hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
+}

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

@@ -1,6 +0,0 @@
-.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,5 +1,6 @@
-<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
+<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>
 

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

@@ -26,7 +26,7 @@ export class FileFlatNode {
 /**
  * The file structure tree data in string. The data could be parsed into a Json object
  */
-const TREE_DATA = `{"Tina":
+const TREE_DATA = `
   {
     "Documents": {
       "angular": {
@@ -61,7 +61,7 @@ const TREE_DATA = `{"Tina":
         "Calendar": "app",
         "Webstorm": "app"
     }
-}}`;
+}`;
 
 /**
  * File database, it can build a tree structured Json object from string.
@@ -96,7 +96,7 @@ export class FileDatabase {
    * 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(value: any, level: number) {
+  buildFileTree(value: any, level: number): FileNode[] {
     let data: any[] = [];
     for (let k in value) {
       let v = value[k];

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

@@ -4,7 +4,7 @@
 
 .example-tree ul,
 .example-tree li {
-  -webkit-margin-before: 0;
-  -webkit-margin-after: 0;
+  margin-top: 0;
+  margin-bottom: 0;
   list-style-type: none;
 }

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

@@ -1,7 +1,8 @@
 <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
   <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
-    <li>
-      <div>{{node.filename}}:  {{node.type}}</div>
+    <li class="mat-tree-node">
+      <button mat-icon-button disabled></button>
+      {{node.filename}}:  {{node.type}}
     </li>
   </mat-tree-node>
 

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

@@ -16,7 +16,7 @@ export class FileNode {
 /**
  * The Json tree data in string. The data could be parsed into Json object
  */
-const TREE_DATA = `{"Tina":
+const TREE_DATA = `
   {
     "Documents": {
       "angular": {
@@ -51,7 +51,7 @@ const TREE_DATA = `{"Tina":
         "Calendar": "app",
         "Webstorm": "app"
     }
-}}`;
+  }`;
 
 /**
  * File database, it can build a tree structured Json object from string.
@@ -86,7 +86,7 @@ export class FileDatabase {
    * 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(value: any, level: number) {
+  buildFileTree(value: any, level: number): FileNode[] {
     let data: any[] = [];
     for (let k in value) {
       let v = value[k];