feat(cdk/tree): add isExpandable parameter to NestedTreeControl, fix some tests

Author: BobobUnicorn

src/cdk/tree/control/nested-tree-control.ts

@@ -11,6 +11,7 @@ import {BaseTreeControl} from './base-tree-control';
 
 /** Optional set of configuration that can be provided to the NestedTreeControl. */
 export interface NestedTreeControlOptions<T, K> {
+  isExpandable?: (dataNode: T) => boolean;
   trackBy?: (dataNode: T) => K;
 }
 
@@ -31,6 +32,10 @@ export class NestedTreeControl<T, K = T> extends BaseTreeControl<T, K> {
     if (this.options) {
       this.trackBy = this.options.trackBy;
     }
+
+    if (this.options?.isExpandable) {
+      this.isExpandable = this.options.isExpandable;
+    }
   }
 
   /**

src/cdk/tree/nested-node.ts

@@ -7,6 +7,7 @@
  */
 import {
   AfterContentInit,
+  ChangeDetectorRef,
   ContentChildren,
   Directive,
   ElementRef,
@@ -60,9 +61,10 @@ export class CdkNestedTreeNode<T, K = T>
   constructor(
     elementRef: ElementRef<HTMLElement>,
     tree: CdkTree<T, K>,
+    changeDetectorRef: ChangeDetectorRef,
     protected _differs: IterableDiffers,
   ) {
-    super(elementRef, tree);
+    super(elementRef, tree, changeDetectorRef);
   }
 
   ngAfterContentInit() {

src/cdk/tree/tree.spec.ts

@@ -1488,7 +1488,6 @@ class NestedCdkTreeApp {
       <cdk-nested-tree-node
           *cdkTreeNodeDef="let node"
           class="customNodeClass"
-          [isExpandable]="node.children.length > 0"
           [isDisabled]="node.isDisabled">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
          <ng-template cdkTreeNodeOutlet></ng-template>
@@ -1499,7 +1498,9 @@ class NestedCdkTreeApp {
 class StaticNestedCdkTreeApp {
   getChildren = (node: TestData) => node.children;
 
-  treeControl: TreeControl<TestData> = new NestedTreeControl(this.getChildren);
+  treeControl: TreeControl<TestData> = new NestedTreeControl(this.getChildren, {
+    isExpandable: node => node.children.length > 0,
+  });
 
   dataSource: FakeDataSource;
 
@@ -1569,7 +1570,6 @@ class CdkTreeAppWithToggle {
   template: `
     <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
-                            [isExpandable]="isExpandable(node) | async"
                             cdkTreeNodeToggle
                             [cdkTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
@@ -1584,10 +1584,10 @@ class NestedCdkTreeAppWithToggle {
   toggleRecursively: boolean = true;
 
   getChildren = (node: TestData) => node.observableChildren;
-  isExpandable = (node: TestData) =>
-    node.observableChildren.pipe(map(children => children.length > 0));
 
-  treeControl: TreeControl<TestData> = new NestedTreeControl(this.getChildren);
+  treeControl: TreeControl<TestData> = new NestedTreeControl(this.getChildren, {
+    isExpandable: node => node.children.length > 0,
+  });
   dataSource: FakeDataSource | null = new FakeDataSource(this.treeControl);
 
   @ViewChild(CdkTree) tree: CdkTree<TestData>;

src/cdk/tree/tree.ts

@@ -54,6 +54,7 @@ import {
   take,
   takeUntil,
   tap,
+  withLatestFrom,
 } from 'rxjs/operators';
 import {TreeControl} from './control/tree-control';
 import {CdkTreeNodeDef, CdkTreeNodeOutletContext} from './node';
@@ -260,9 +261,26 @@ export class CdkTree<T, K = T>
       }
     }
 
+    let expansionModel;
     if (!this.treeControl) {
-      this._expansionModel = new SelectionModel(true);
+      expansionModel = new SelectionModel<K>(true);
+      this._expansionModel = expansionModel;
+    } else {
+      expansionModel = this.treeControl.expansionModel;
     }
+
+    // We manually detect changes on all the children nodes when expansion
+    // status changes; otherwise, the various attributes won't be updated.
+    expansionModel.changed
+      .pipe(withLatestFrom(this._nodes), takeUntil(this._onDestroy))
+      .subscribe(([changes, nodes]) => {
+        for (const added of changes.added) {
+          nodes.get(added)?._changeDetectorRef.detectChanges();
+        }
+        for (const removed of changes.removed) {
+          nodes.get(removed)?._changeDetectorRef.detectChanges();
+        }
+      });
   }
 
   ngOnDestroy() {
@@ -986,13 +1004,21 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     return this._tree._getLevel(this._data) ?? this._parentNodeAriaLevel;
   }
 
+  /** Determines if the tree node is expandable. */
+  _isExpandable(): boolean {
+    if (typeof this._tree.treeControl?.isExpandable === 'function') {
+      return this._tree.treeControl.isExpandable(this._data);
+    }
+    return this.isExpandable;
+  }
+
   /**
    * Determines the value for `aria-expanded`.
    *
    * For non-expandable nodes, this is `null`.
    */
   _getAriaExpanded(): string | null {
-    if (!this.isExpandable) {
+    if (!this._isExpandable()) {
       return null;
     }
     return String(this.isExpanded);
@@ -1016,7 +1042,11 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     return this._tree._getPositionInSet(this._data);
   }
 
-  constructor(protected _elementRef: ElementRef<HTMLElement>, protected _tree: CdkTree<T, K>) {
+  constructor(
+    protected _elementRef: ElementRef<HTMLElement>,
+    protected _tree: CdkTree<T, K>,
+    public _changeDetectorRef: ChangeDetectorRef,
+  ) {
     CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode<T, K>;
     this.role = 'treeitem';
   }

src/material/tree/node.ts

@@ -16,6 +16,7 @@ import {
 import {
   AfterContentInit,
   Attribute,
+  ChangeDetectorRef,
   Directive,
   ElementRef,
   Input,
@@ -83,9 +84,10 @@ export class MatTreeNode<T, K = T>
   constructor(
     elementRef: ElementRef<HTMLElement>,
     tree: CdkTree<T, K>,
+    changeDetectorRef: ChangeDetectorRef,
     @Attribute('tabindex') tabIndex: string,
   ) {
-    super(elementRef, tree);
+    super(elementRef, tree, changeDetectorRef);
     this.tabIndex = Number(tabIndex) || 0;
   }
 
@@ -165,9 +167,10 @@ export class MatNestedTreeNode<T, K = T>
     private elementRef: ElementRef<HTMLElement>,
     tree: CdkTree<T, K>,
     differs: IterableDiffers,
+    changeDetectorRef: ChangeDetectorRef,
     @Attribute('tabindex') tabIndex: string,
   ) {
-    super(elementRef, tree, differs);
+    super(elementRef, tree, changeDetectorRef, differs);
     this.tabIndex = Number(tabIndex) || 0;
   }
 

src/material/tree/testing/shared.spec.ts

@@ -276,7 +276,9 @@ class TreeHarnessTest {
     node => node.expandable,
   );
   flatTreeDataSource = new MatTreeFlatDataSource(this.flatTreeControl, this.treeFlattener);
-  nestedTreeControl = new NestedTreeControl<Node>(node => node.children);
+  nestedTreeControl = new NestedTreeControl<Node>(node => node.children, {
+    isExpandable: node => !!node.children && node.children.length > 0,
+  });
   nestedTreeDataSource = new MatTreeNestedDataSource<Node>();
 
   constructor() {