feat(cdk/tree): allow use of nested node with flattened data, and vice versa

src/cdk/tree/nested-node.ts

@@ -16,12 +16,10 @@ import {
   OnInit,
   QueryList,
 } from '@angular/core';
-import {isObservable} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
 import {CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet} from './outlet';
 import {CdkTree, CdkTreeNode} from './tree';
-import {getTreeControlFunctionsMissingError} from './tree-errors';
 
 /**
  * Nested node is a child of `<cdk-tree>`. It works with nested tree.
@@ -69,22 +67,13 @@ export class CdkNestedTreeNode<T, K = T>
 
   ngAfterContentInit() {
     this._dataDiffer = this._differs.find([]).create(this._tree.trackBy);
-    const childrenAccessor = this._tree._getChildrenAccessor();
-    if (!childrenAccessor && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-      throw getTreeControlFunctionsMissingError();
-    } else if (childrenAccessor) {
-      const childrenNodes = childrenAccessor(this.data);
-      if (Array.isArray(childrenNodes)) {
-        this.updateChildrenNodes(childrenNodes as T[]);
-      } else if (isObservable(childrenNodes)) {
-        childrenNodes
-          .pipe(takeUntil(this._destroyed))
-          .subscribe(result => this.updateChildrenNodes(result));
-      }
-      this.nodeOutlet.changes
-        .pipe(takeUntil(this._destroyed))
-        .subscribe(() => this.updateChildrenNodes());
-    }
+    this._tree
+      ._getDirectChildren(this.data)
+      .pipe(takeUntil(this._destroyed))
+      .subscribe(result => this.updateChildrenNodes(result));
+    this.nodeOutlet.changes
+      .pipe(takeUntil(this._destroyed))
+      .subscribe(() => this.updateChildrenNodes());
   }
 
   // This is a workaround for https://github.com/angular/angular/issues/23091
@@ -106,7 +95,7 @@ export class CdkNestedTreeNode<T, K = T>
     }
     if (outlet && this._children) {
       const viewContainer = outlet.viewContainer;
-      this._tree.renderNodeChanges(this._children, this._dataDiffer, viewContainer, this._data);
+      this._tree._renderNodeChanges(this._children, this._dataDiffer, viewContainer, this._data);
     } else {
       // Reset the data differ if there's no children nodes displayed
       this._dataDiffer.diff([]);

src/cdk/tree/padding.ts

@@ -80,8 +80,7 @@ export class CdkTreeNodePadding<T, K = T> implements OnDestroy {
 
   /** The padding indent value for the tree node. Returns a string with px numbers if not null. */
   _paddingIndent(): string | null {
-    const nodeLevel =
-      (this._treeNode.data && this._tree._getLevelAccessor()?.(this._treeNode.data)) ?? null;
+    const nodeLevel = (this._treeNode.data && this._tree._getLevel(this._treeNode.data)) ?? null;
     const level = this._level == null ? nodeLevel : this._level;
     return typeof level === 'number' ? `${level * this._indent}${this.indentUnits}` : null;
   }

src/cdk/tree/tree-errors.ts

@@ -48,9 +48,9 @@ export function getMultipleTreeControlsError() {
 }
 
 /**
- * Returns an error to be thrown when tree control did not implement functions for flat/nested node.
+ * Returns an error to be thrown when the node type is not specified.
  * @docs-private
  */
-export function getTreeControlFunctionsMissingError() {
-  return Error(`Could not find functions for nested/flat tree in tree control.`);
+export function getTreeControlNodeTypeUnspecifiedError() {
+  return Error(`The nodeType was not specified for the tree.`);
 }

src/cdk/tree/tree-redesign.spec.ts

@@ -5,7 +5,7 @@
  * 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 {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {
   Component,
   ErrorHandler,
@@ -24,7 +24,6 @@ import {map} from 'rxjs/operators';
 
 import {CdkTreeModule, CdkTreeNodePadding} from './index';
 import {CdkTree, CdkTreeNode} from './tree';
-import {getTreeControlFunctionsMissingError} from './tree-errors';
 
 /**
  * This is a cloned version of `tree.spec.ts` that contains all the same tests,
@@ -1127,20 +1126,6 @@ describe('CdkTree redesign', () => {
         expect(changedNodes[5].getAttribute('initialIndex')).toBe('2');
       });
     });
-
-    it('should throw an error when missing function in nested tree', fakeAsync(() => {
-      configureCdkTreeTestingModule([NestedCdkErrorTreeApp]);
-      expect(() => {
-        try {
-          TestBed.createComponent(NestedCdkErrorTreeApp).detectChanges();
-          flush();
-        } catch {
-          flush();
-        } finally {
-          flush();
-        }
-      }).toThrowError(getTreeControlFunctionsMissingError().message);
-    }));
   });
 
   describe('with depth', () => {
@@ -1356,7 +1341,8 @@ function expectNestedTreeToMatch(treeElement: Element, ...expectedTree: any[]) {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel">
+    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel"
+        nodeType="flat">
       <cdk-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
                      cdkTreeNodePadding [cdkTreeNodePaddingIndent]="indent"
                      cdkTreeNodeToggle
@@ -1383,7 +1369,8 @@ class SimpleCdkTreeApp {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel">
+    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel"
+        nodeType="flat">
       <ng-container [ngSwitch]="true">
         <cdk-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
                       cdkTreeNodePadding [cdkTreeNodePaddingIndent]="indent"
@@ -1399,7 +1386,8 @@ class SimpleCdkTreeAppWithIndirectNodes extends SimpleCdkTreeApp {}
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataSource" [childrenAccessor]="getChildren">
+    <cdk-tree [dataSource]="dataSource" [childrenAccessor]="getChildren"
+        nodeType="nested">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
          <ng-template cdkTreeNodeOutlet></ng-template>
@@ -1417,7 +1405,8 @@ class NestedCdkTreeApp {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataSource" [childrenAccessor]="getChildren">
+    <cdk-tree [dataSource]="dataSource" [childrenAccessor]="getChildren"
+        nodeType="nested">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
          <ng-template cdkTreeNodeOutlet></ng-template>
@@ -1445,7 +1434,8 @@ class StaticNestedCdkTreeApp {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataSource" [childrenAccessor]="getChildren">
+    <cdk-tree [dataSource]="dataSource" [childrenAccessor]="getChildren"
+        nodeType="nested">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
          <ng-template cdkTreeNodeOutlet></ng-template>
@@ -1469,7 +1459,8 @@ class WhenNodeNestedCdkTreeApp {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel">
+    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel"
+        nodeType="flat">
       <cdk-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
                      cdkTreeNodePadding
                      cdkTreeNodeToggle [cdkTreeNodeToggleRecursive]="toggleRecursively"
@@ -1492,7 +1483,8 @@ class CdkTreeAppWithToggle {
 
 @Component({
   template: `
-    <cdk-tree #tree [dataSource]="dataSource" [childrenAccessor]="getChildren">
+    <cdk-tree #tree [dataSource]="dataSource" [childrenAccessor]="getChildren"
+        nodeType="nested">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
                             cdkTreeNodeToggle [cdkTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
@@ -1515,7 +1507,8 @@ class NestedCdkTreeAppWithToggle {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel">
+    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel"
+        nodeType="flat">
       <cdk-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
                      cdkTreeNodePadding [cdkTreeNodePaddingIndent]="28"
                      cdkTreeNodeToggle
@@ -1543,7 +1536,8 @@ class WhenNodeCdkTreeApp {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataArray" [levelAccessor]="getLevel">
+    <cdk-tree [dataSource]="dataArray" [levelAccessor]="getLevel"
+        nodeType="flat">
       <cdk-tree-node *cdkTreeNodeDef="let node"
                      cdkTreeNodePadding [cdkTreeNodePaddingIndent]="28"
                      cdkTreeNodeToggle
@@ -1568,7 +1562,8 @@ class ArrayDataSourceCdkTreeApp {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataObservable" [levelAccessor]="getLevel">
+    <cdk-tree [dataSource]="dataObservable" [levelAccessor]="getLevel"
+        nodeType="flat">
       <cdk-tree-node *cdkTreeNodeDef="let node"
                      cdkTreeNodePadding [cdkTreeNodePaddingIndent]="28"
                      cdkTreeNodeToggle
@@ -1593,7 +1588,8 @@ class ObservableDataSourceCdkTreeApp {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataArray" [childrenAccessor]="getChildren">
+    <cdk-tree [dataSource]="dataArray" [childrenAccessor]="getChildren"
+        nodeType="nested">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node">
                      [{{node.pizzaTopping}}] - [{{node.pizzaCheese}}] + [{{node.pizzaBase}}]
          <ng-template cdkTreeNodeOutlet></ng-template>
@@ -1615,7 +1611,8 @@ class ArrayDataSourceNestedCdkTreeApp {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataObservable" [childrenAccessor]="getChildren">
+    <cdk-tree [dataSource]="dataObservable" [childrenAccessor]="getChildren"
+        nodeType="nested">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node">
                      [{{node.pizzaTopping}}] - [{{node.pizzaCheese}}] + [{{node.pizzaBase}}]
          <ng-template cdkTreeNodeOutlet></ng-template>
@@ -1637,28 +1634,8 @@ class ObservableDataSourceNestedCdkTreeApp {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel">
-      <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
-          [isExpandable]="isExpandable(node)">
-                     {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
-         <ng-template cdkTreeNodeOutlet></ng-template>
-      </cdk-nested-tree-node>
-    </cdk-tree>
-  `,
-})
-class NestedCdkErrorTreeApp {
-  getLevel = (node: TestData) => node.level;
-
-  isExpandable = (node: TestData) => node.children.length > 0;
-
-  dataSource: FakeDataSource | null = new FakeDataSource();
-
-  @ViewChild(CdkTree) tree: CdkTree<TestData>;
-}
-
-@Component({
-  template: `
-    <cdk-tree [dataSource]="dataArray" [childrenAccessor]="getChildren">
+    <cdk-tree [dataSource]="dataArray" [childrenAccessor]="getChildren"
+        nodeType="nested">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node; let level = level">
           <span class="tree-test-level">{{level}}</span>
            [{{node.pizzaTopping}}] - [{{node.pizzaCheese}}] + [{{node.pizzaBase}}]
@@ -1681,7 +1658,8 @@ class DepthNestedCdkTreeApp {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel" [trackBy]="trackByFn">
+    <cdk-tree [dataSource]="dataSource" [levelAccessor]="getLevel" [trackBy]="trackByFn"
+        nodeType="flat">
       <cdk-tree-node *cdkTreeNodeDef="let node" class="customNodeClass" [isExpandable]="isExpandable(node)">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
       </cdk-tree-node>
@@ -1712,7 +1690,8 @@ class CdkTreeAppWithTrackBy {
 
 @Component({
   template: `
-    <cdk-tree [dataSource]="dataArray" [childrenAccessor]="getChildren" [trackBy]="trackByFn">
+    <cdk-tree [dataSource]="dataArray" [childrenAccessor]="getChildren" [trackBy]="trackByFn"
+        nodeType="nested">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node">
            [{{node.pizzaTopping}}] - [{{node.pizzaCheese}}] + [{{node.pizzaBase}}]
          <ng-template cdkTreeNodeOutlet></ng-template>

src/cdk/tree/tree.spec.ts

@@ -5,7 +5,7 @@
  * 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 {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {
   Component,
   ErrorHandler,
@@ -27,7 +27,6 @@ import {FlatTreeControl} from './control/flat-tree-control';
 import {NestedTreeControl} from './control/nested-tree-control';
 import {CdkTreeModule, CdkTreeNodePadding} from './index';
 import {CdkTree, CdkTreeNode} from './tree';
-import {getTreeControlFunctionsMissingError} from './tree-errors';
 
 describe('CdkTree', () => {
   /** Represents an indent for expectNestedTreeToMatch */
@@ -1126,20 +1125,6 @@ describe('CdkTree', () => {
         expect(changedNodes[5].getAttribute('initialIndex')).toBe('2');
       });
     });
-
-    it('should throw an error when missing function in nested tree', fakeAsync(() => {
-      configureCdkTreeTestingModule([NestedCdkErrorTreeApp]);
-      expect(() => {
-        try {
-          TestBed.createComponent(NestedCdkErrorTreeApp).detectChanges();
-          flush();
-        } catch {
-          flush();
-        } finally {
-          flush();
-        }
-      }).toThrowError(getTreeControlFunctionsMissingError().message);
-    }));
   });
 
   describe('with depth', () => {
@@ -1633,28 +1618,6 @@ class ObservableDataSourceNestedCdkTreeApp {
   @ViewChild(CdkTree) tree: CdkTree<TestData>;
 }
 
-@Component({
-  template: `
-    <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
-      <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass">
-                     {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
-         <ng-template cdkTreeNodeOutlet></ng-template>
-      </cdk-nested-tree-node>
-    </cdk-tree>
-  `,
-})
-class NestedCdkErrorTreeApp {
-  getLevel = (node: TestData) => node.level;
-
-  isExpandable = (node: TestData) => node.children.length > 0;
-
-  treeControl: TreeControl<TestData> = new FlatTreeControl(this.getLevel, this.isExpandable);
-
-  dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl);
-
-  @ViewChild(CdkTree) tree: CdkTree<TestData>;
-}
-
 @Component({
   template: `
     <cdk-tree [dataSource]="dataArray" [treeControl]="treeControl">