refactor(cdk-experimental/tree): use explicit inputs for passing dependencies (#31654)

ok7sai · web-flow · commit 8aa35c6c723b · 2025-08-08T13:27:08.000-07:00
diff --git a/src/cdk-experimental/tree/tree.spec.ts b/src/cdk-experimental/tree/tree.spec.ts
@@ -1,4 +1,5 @@
 import {Component, signal} from '@angular/core';
+import {NgTemplateOutlet} from '@angular/common';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {Direction} from '@angular/cdk/bidi';
@@ -1336,63 +1337,42 @@ interface TestTreeNode<V = string> {
       [(value)]="value"
       [nav]="nav()"
       [currentType]="currentType()"
+      #tree="cdkTree"
     >
       @for (node of nodes(); track node.value) {
-        <li
-          cdkTreeItem
-          [value]="node.value"
-          [label]="node.label"
-          [disabled]="!!node.disabled"
-          [attr.data-value]="node.value"
-        >
-          {{ node.label }}
-          @if (node.children !== undefined && node.children!.length > 0) {
-            <ul
-              cdkTreeItemGroup
-              [value]="node.value"
-              [preserveContent]="!!node.preserveContent"
-              [attr.data-group-for]="node.value">
-              <ng-template cdkTreeItemGroupContent>
-                @for (node of node.children; track node.value) {
-                  <li
-                    cdkTreeItem
-                    [value]="node.value"
-                    [label]="node.label"
-                    [disabled]="!!node.disabled"
-                    [attr.data-value]="node.value"
-                  >
-                    {{ node.label }}
-                    @if (node.children !== undefined && node.children!.length > 0) {
-                      <ul
-                        cdkTreeItemGroup
-                        [value]="node.value"
-                        [preserveContent]="!!node.preserveContent"
-                        [attr.data-group-for]="node.value">
-                        <ng-template cdkTreeItemGroupContent>
-                          @for (node of node.children; track node.value) {
-                            <li
-                              cdkTreeItem
-                              [value]="node.value"
-                              [label]="node.label"
-                              [disabled]="!!node.disabled"
-                              [attr.data-value]="node.value"
-                            >
-                              {{ node.label }}
-                            </li>
-                          }
-                        </ng-template>
-                      </ul>
-                    }
-                  </li>
-                }
-              </ng-template>
-            </ul>
-          }
-        </li>
+        <ng-template [ngTemplateOutlet]="nodeTemplate" [ngTemplateOutletContext]="{ node: node, parent: tree }" />
       }
     </ul>
+
+    <ng-template #nodeTemplate let-node="node" let-parent="parent">
+      <li
+        cdkTreeItem
+        [value]="node.value"
+        [label]="node.label"
+        [disabled]="!!node.disabled"
+        [parent]="parent"
+        [attr.data-value]="node.value"
+        #treeItem="cdkTreeItem"
+      >
+        {{ node.label }}
+        @if (node.children !== undefined && node.children!.length > 0) {
+          <ul
+            cdkTreeItemGroup
+            [ownedBy]="treeItem"
+            [preserveContent]="!!node.preserveContent"
+            [attr.data-group-for]="node.value"
+            #group="cdkTreeItemGroup">
+            <ng-template cdkTreeItemGroupContent>
+              @for (node of node.children; track node.value) {
+                <ng-template [ngTemplateOutlet]="nodeTemplate" [ngTemplateOutletContext]="{ node: node, parent: group }" />
+              }
+            </ng-template>
+          </ul>
+        }
+      </li>
+    </ng-template>
   `,
-  imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent],
+  imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent, NgTemplateOutlet],
 })
 class TestTreeComponent {
   nodes = signal<TestTreeNode[]>([
diff --git a/src/cdk-experimental/tree/tree.ts b/src/cdk-experimental/tree/tree.ts
@@ -79,9 +79,6 @@ export class CdkTree<V> {
   /** All CdkTreeItem instances within this tree. */
   private readonly _unorderedItems = signal(new Set<CdkTreeItem<V>>());
 
-  /** All CdkGroup instances within this tree. */
-  readonly unorderedGroups = signal(new Set<CdkTreeItemGroup<V>>());
-
   /** Orientation of the tree. */
   readonly orientation = input<'vertical' | 'horizontal'>('vertical');
 
@@ -144,28 +141,14 @@ export class CdkTree<V> {
     this._hasFocused.set(true);
   }
 
-  register(child: CdkTreeItemGroup<V> | CdkTreeItem<V>) {
-    if (child instanceof CdkTreeItemGroup) {
-      this.unorderedGroups().add(child);
-      this.unorderedGroups.set(new Set(this.unorderedGroups()));
-    }
-
-    if (child instanceof CdkTreeItem) {
-      this._unorderedItems().add(child);
-      this._unorderedItems.set(new Set(this._unorderedItems()));
-    }
+  register(child: CdkTreeItem<V>) {
+    this._unorderedItems().add(child);
+    this._unorderedItems.set(new Set(this._unorderedItems()));
   }
 
-  deregister(child: CdkTreeItemGroup<V> | CdkTreeItem<V>) {
-    if (child instanceof CdkTreeItemGroup) {
-      this.unorderedGroups().delete(child);
-      this.unorderedGroups.set(new Set(this.unorderedGroups()));
-    }
-
-    if (child instanceof CdkTreeItem) {
-      this._unorderedItems().delete(child);
-      this._unorderedItems.set(new Set(this._unorderedItems()));
-    }
+  unregister(child: CdkTreeItem<V>) {
+    this._unorderedItems().delete(child);
+    this._unorderedItems.set(new Set(this._unorderedItems()));
   }
 }
 
@@ -185,7 +168,7 @@ export class CdkTree<V> {
     '[attr.aria-current]': 'pattern.current()',
     '[attr.aria-disabled]': 'pattern.disabled()',
     '[attr.aria-level]': 'pattern.level()',
-    '[attr.aria-owns]': 'group()?.id',
+    '[attr.aria-owns]': 'ownsId()',
     '[attr.aria-setsize]': 'pattern.setsize()',
     '[attr.aria-posinset]': 'pattern.posinset()',
     '[attr.tabindex]': 'pattern.tabindex()',
@@ -199,29 +182,21 @@ export class CdkTreeItem<V> implements OnInit, OnDestroy, HasElement {
   /** A unique identifier for the tree item. */
   private readonly _id = inject(_IdGenerator).getId('cdk-tree-item-');
 
-  /** The top level CdkTree. */
-  private readonly _tree = inject(CdkTree<V>);
-
-  /** The parent CdkTreeItem. */
-  private readonly _treeItem = inject(CdkTreeItem<V>, {optional: true, skipSelf: true});
-
-  /** The parent CdkGroup, if any. */
-  private readonly _parentGroup = inject(CdkTreeItemGroup<V>, {optional: true});
+  /** The owned tree item group. */
+  private readonly _group = signal<CdkTreeItemGroup<V> | undefined>(undefined);
 
-  /** The top level TreePattern. */
-  private readonly _treePattern = computed(() => this._tree.pattern);
-
-  /** The parent TreeItemPattern. */
-  private readonly _parentPattern: Signal<TreeItemPattern<V> | TreePattern<V>> = computed(
-    () => this._treeItem?.pattern ?? this._treePattern(),
-  );
+  /** The id of the owned group. */
+  readonly ownsId = computed(() => this._group()?.id);
 
   /** The host native element. */
   readonly element = computed(() => this._elementRef.nativeElement);
 
   /** The value of the tree item. */
   readonly value = input.required<V>();
 
+  /** The parent tree root or tree item group. */
+  readonly parent = input.required<CdkTree<V> | CdkTreeItemGroup<V>>();
+
   /** Whether the tree item is disabled. */
   readonly disabled = input(false, {transform: booleanAttribute});
 
@@ -231,46 +206,61 @@ export class CdkTreeItem<V> implements OnInit, OnDestroy, HasElement {
   /** Search term for typeahead. */
   readonly searchTerm = computed(() => this.label() ?? this.element().textContent);
 
-  /** Manual group assignment. */
-  readonly group = signal<CdkTreeItemGroup<V> | undefined>(undefined);
+  /** The tree root. */
+  readonly tree: Signal<CdkTree<V>> = computed(() => {
+    if (this.parent() instanceof CdkTree) {
+      return this.parent() as CdkTree<V>;
+    }
+    return (this.parent() as CdkTreeItemGroup<V>).ownedBy().tree();
+  });
 
   /** The UI pattern for this item. */
-  readonly pattern: TreeItemPattern<V> = new TreeItemPattern<V>({
-    ...this,
-    id: () => this._id,
-    tree: this._treePattern,
-    parent: this._parentPattern,
-    children: computed(
-      () =>
-        this.group()
-          ?.children()
-          .map(item => (item as CdkTreeItem<V>).pattern) ?? [],
-    ),
-    hasChildren: computed(() => !!this.group()),
-  });
+  pattern: TreeItemPattern<V>;
 
   constructor() {
-    afterRenderEffect(() => {
-      const group = [...this._tree.unorderedGroups()].find(group => group.value() === this.value());
-      if (group) {
-        this.group.set(group);
-      }
-    });
-
     // Updates the visibility of the owned group.
     afterRenderEffect(() => {
-      this.group()?.visible.set(this.pattern.expanded());
+      this._group()?.visible.set(this.pattern.expanded());
     });
   }
 
   ngOnInit() {
-    this._tree.register(this);
-    this._parentGroup?.register(this);
+    this.parent().register(this);
+    this.tree().register(this);
+
+    const treePattern = computed(() => this.tree().pattern);
+    const parentPattern = computed(() => {
+      if (this.parent() instanceof CdkTree) {
+        return treePattern();
+      }
+      return (this.parent() as CdkTreeItemGroup<V>).ownedBy().pattern;
+    });
+    this.pattern = new TreeItemPattern<V>({
+      ...this,
+      id: () => this._id,
+      tree: treePattern,
+      parent: parentPattern,
+      children: computed(
+        () =>
+          this._group()
+            ?.children()
+            .map(item => (item as CdkTreeItem<V>).pattern) ?? [],
+      ),
+      hasChildren: computed(() => !!this._group()),
+    });
   }
 
   ngOnDestroy() {
-    this._tree.deregister(this);
-    this._parentGroup?.deregister(this);
+    this.parent().unregister(this);
+    this.tree().unregister(this);
+  }
+
+  register(group: CdkTreeItemGroup<V>) {
+    this._group.set(group);
+  }
+
+  unregister() {
+    this._group.set(undefined);
   }
 }
 
@@ -300,9 +290,6 @@ export class CdkTreeItemGroup<V> implements OnInit, OnDestroy, HasElement {
   /** The DeferredContentAware host directive. */
   private readonly _deferredContentAware = inject(DeferredContentAware);
 
-  /** The top level CdkTree. */
-  private readonly _tree = inject(CdkTree<V>);
-
   /** All groupable items that are descendants of the group. */
   private readonly _unorderedItems = signal(new Set<CdkTreeItem<V>>());
 
@@ -318,8 +305,8 @@ export class CdkTreeItemGroup<V> implements OnInit, OnDestroy, HasElement {
   /** Child items within this group. */
   readonly children = computed(() => [...this._unorderedItems()].sort(sortDirectives));
 
-  /** Identifier for matching the group owner. */
-  readonly value = input.required<V>();
+  /** Tree item that owns the group. */
+  readonly ownedBy = input.required<CdkTreeItem<V>>();
 
   constructor() {
     // Connect the group's hidden state to the DeferredContentAware's visibility.
@@ -329,19 +316,19 @@ export class CdkTreeItemGroup<V> implements OnInit, OnDestroy, HasElement {
   }
 
   ngOnInit() {
-    this._tree.register(this);
+    this.ownedBy().register(this);
   }
 
   ngOnDestroy() {
-    this._tree.deregister(this);
+    this.ownedBy().unregister();
   }
 
   register(child: CdkTreeItem<V>) {
     this._unorderedItems().add(child);
     this._unorderedItems.set(new Set(this._unorderedItems()));
   }
 
-  deregister(child: CdkTreeItem<V>) {
+  unregister(child: CdkTreeItem<V>) {
     this._unorderedItems().delete(child);
     this._unorderedItems.set(new Set(this._unorderedItems()));
   }
diff --git a/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.html b/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.html
@@ -50,11 +50,44 @@
 >
   @if (nav.value) {
     @for (node of treeData; track node) {
-      <example-nav-node [node]="node" />
+      <ng-template [ngTemplateOutlet]="navNodeTemplate" [ngTemplateOutletContext]="{ node: node, parent: tree }" />
     }
   } @else {
     @for (node of treeData; track node) {
-      <example-node [node]="node" />
+      <example-node [node]="node" [parent]="tree" />
     }
   }
 </ul>
+
+<ng-template #navNodeTemplate let-node="node" let-parent="parent">
+  <li class="example-tree-item">
+    <a
+      cdkTreeItem
+      class="example-tree-item-content example-selectable example-stateful"
+      [value]="node.value"
+      [label]="node.label || node.value"
+      [disabled]="node.disabled"
+      [parent]="parent"
+      #treeItem="cdkTreeItem"
+      href="#{{node.value}}"
+      (click)="$event.preventDefault()"
+    >
+      <mat-icon class="example-tree-item-icon" aria-hidden="true">
+        @if (treeItem.pattern.expandable()) {
+          {{ treeItem.pattern.expanded() ? 'expand_less' : 'expand_more' }}
+        }
+      </mat-icon>
+      {{ node.label }}
+    </a>
+
+    @if (node.children !== undefined && node.children!.length > 0) {
+      <ul cdkTreeItemGroup [ownedBy]="treeItem" #group="cdkTreeItemGroup">
+        <ng-template cdkTreeItemGroupContent>
+          @for (child of node.children; track child) {
+            <ng-template [ngTemplateOutlet]="navNodeTemplate" [ngTemplateOutletContext]="{ node: child, parent: group }" />
+          }
+        </ng-template>
+      </ul>
+    }
+  </li>
+</ng-template>
diff --git a/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.ts b/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.ts
