fix(material/tree): migrate examples off TreeControl

src/components-examples/material/tree/index.ts

@@ -1,6 +1,3 @@
-export {TreeDynamicExample} from './tree-dynamic/tree-dynamic-example';
 export {TreeFlatOverviewExample} from './tree-flat-overview/tree-flat-overview-example';
 export {TreeHarnessExample} from './tree-harness/tree-harness-example';
-export {TreeLoadmoreExample} from './tree-loadmore/tree-loadmore-example';
 export {TreeNestedOverviewExample} from './tree-nested-overview/tree-nested-overview-example';
-export {TreeLegacyKeyboardInterfaceExample} from './tree-legacy-keyboard-interface/tree-legacy-keyboard-interface-example';

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

@@ -1,17 +1,22 @@
-<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+<mat-tree #tree [dataSource]="dataSource" [levelAccessor]="levelAccessor">
   <!-- This is the tree node template for leaf nodes -->
-  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+  <mat-tree-node *matTreeNodeDef="let node"
+                 matTreeNodePadding
+                 [style.display]="shouldRender(node) ? 'flex' : 'none'">
     <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
     {{node.name}}
   </mat-tree-node>
   <!-- This is the tree node template for expandable nodes -->
-  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodeToggle
+  <mat-tree-node *matTreeNodeDef="let node;when: hasChild"
+                 matTreeNodePadding
+                 matTreeNodeToggle
+                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
                  [cdkTreeNodeTypeaheadLabel]="node.name">
     <button mat-icon-button matTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name">
       <mat-icon class="mat-icon-rtl-mirror">
-        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+        {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
     {{node.name}}

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

@@ -1,45 +1,34 @@
-import {FlatTreeControl} from '@angular/cdk/tree';
-import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule} from '@angular/material/tree';
+import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
+import {MatTree, MatTreeModule} from '@angular/material/tree';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
+import {ArrayDataSource} from '@angular/cdk/collections';
 
 /**
- * Food data with nested structure.
- * Each node has a name and an optional list of children.
+ * Food data with a flat structure.
+ * Each node has a name and the level it should display. The order
+ * is used such that an item is a child of the previous item if the
+ * level is increased.
  */
 interface FoodNode {
   name: string;
-  children?: FoodNode[];
+  level: number;
 }
 
 const TREE_DATA: FoodNode[] = [
-  {
-    name: 'Fruit',
-    children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}],
-  },
-  {
-    name: 'Vegetables',
-    children: [
-      {
-        name: 'Green',
-        children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
-      },
-      {
-        name: 'Orange',
-        children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
-      },
-    ],
-  },
+  {name: 'Fruit', level: 0},
+  {name: 'Apple', level: 1},
+  {name: 'Banana', level: 1},
+  {name: 'Fruit loops', level: 1},
+  {name: 'Vegetables', level: 0},
+  {name: 'Green', level: 1},
+  {name: 'Broccoli', level: 2},
+  {name: 'Brussels spouts', level: 2},
+  {name: 'Orange', level: 1},
+  {name: 'Pumpkins', level: 2},
+  {name: 'Carrots', level: 2},
 ];
 
-/** Flat node with expandable and level information */
-interface ExampleFlatNode {
-  expandable: boolean;
-  name: string;
-  level: number;
-}
-
 /**
  * @title Tree with flat nodes
  */
@@ -51,31 +40,33 @@ interface ExampleFlatNode {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TreeFlatOverviewExample {
-  private _transformer = (node: FoodNode, level: number) => {
-    return {
-      expandable: !!node.children && node.children.length > 0,
-      name: node.name,
-      level: level,
-    };
-  };
+  @ViewChild(MatTree) tree: MatTree<FoodNode>;
 
-  treeControl = new FlatTreeControl<ExampleFlatNode>(
-    node => node.level,
-    node => node.expandable,
-  );
+  dataSource = new ArrayDataSource(TREE_DATA);
 
-  treeFlattener = new MatTreeFlattener(
-    this._transformer,
-    node => node.level,
-    node => node.expandable,
-    node => node.children,
-  );
+  levelAccessor = (dataNode: FoodNode) => dataNode.level;
 
-  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+  hasChild = (index: number, node: FoodNode) => {
+    return node.level < TREE_DATA[index + 1]?.level;
+  };
 
-  constructor() {
-    this.dataSource.data = TREE_DATA;
+  shouldRender(node: FoodNode): boolean {
+    // This node should render if it is a root node or if all of its ancestors are expanded.
+    const parent = this._getParentNode(node);
+    return !parent || (!!this.tree?.isExpanded(parent) && this.shouldRender(parent));
   }
 
-  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
+  private _getParentNode(node: FoodNode) {
+    const nodeIndex = TREE_DATA.indexOf(node);
+
+    // Determine the node's parent by finding the first preceding node that's
+    // one level shallower.
+    for (let i = nodeIndex - 1; i >= 0; i--) {
+      if (TREE_DATA[i].level === node.level - 1) {
+        return TREE_DATA[i];
+      }
+    }
+
+    return null;
+  }
 }

src/components-examples/material/tree/tree-harness/tree-harness-example.html

@@ -1,4 +1,4 @@
-<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+<mat-tree #tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
   <!-- 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 -->
@@ -11,7 +11,7 @@
     <button mat-icon-button matTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name">
       <mat-icon class="mat-icon-rtl-mirror">
-        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+        {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
     {{node.name}}