From ff26e6ac16dd9eb92175e5b2d19a7e7f5a76a2e2 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 11 Nov 2024 18:41:37 +0100
Subject: [PATCH 1/2] fix(cdk/tree): warn if mixed node types are used within
 the same tree

Currently the tree somewhat works if a flat node and a nested node are used together, however they can break down depending on the data that is passed in.

These changes add a warning that will tell users to use a consistent node type.

Fixes #29927.
---
 src/cdk/tree/nested-node.ts                   | 11 ++--------
 src/cdk/tree/tree.ts                          | 21 ++++++++++++-------
 .../tree/testing/tree-harness.spec.ts         |  4 ++--
 tools/public_api_guard/cdk/tree.md            | 10 +++++----
 4 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/cdk/tree/nested-node.ts b/src/cdk/tree/nested-node.ts
index 406c4d65e8bb..6d7a93b88264 100644
--- a/src/cdk/tree/nested-node.ts
+++ b/src/cdk/tree/nested-node.ts
@@ -12,7 +12,6 @@ import {
   IterableDiffer,
   IterableDiffers,
   OnDestroy,
-  OnInit,
   QueryList,
   inject,
 } from '@angular/core';
@@ -40,8 +39,9 @@ import {CdkTreeNode} from './tree';
 })
 export class CdkNestedTreeNode<T, K = T>
   extends CdkTreeNode<T, K>
-  implements AfterContentInit, OnDestroy, OnInit
+  implements AfterContentInit, OnDestroy
 {
+  protected override _type: 'flat' | 'nested' = 'nested';
   protected _differs = inject(IterableDiffers);
 
   /** Differ used to find the changes in the data provided by the data source. */
@@ -75,13 +75,6 @@ export class CdkNestedTreeNode<T, K = T>
       .subscribe(() => this.updateChildrenNodes());
   }
 
-  // This is a workaround for https://github.com/angular/angular/issues/23091
-  // In aot mode, the lifecycle hooks from parent class are not called.
-  override ngOnInit() {
-    this._tree._setNodeTypeIfUnset('nested');
-    super.ngOnInit();
-  }
-
   override ngOnDestroy() {
     this._clear();
     super.ngOnDestroy();
diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
index 603f6b9dee3e..c7daf68f9fd1 100644
--- a/src/cdk/tree/tree.ts
+++ b/src/cdk/tree/tree.ts
@@ -323,9 +323,17 @@ export class CdkTree<T, K = T>
    * This will be called by the first node that's rendered in order for the tree
    * to determine what data transformations are required.
    */
-  _setNodeTypeIfUnset(nodeType: 'flat' | 'nested') {
-    if (this._nodeType.value === null) {
-      this._nodeType.next(nodeType);
+  _setNodeTypeIfUnset(newType: 'flat' | 'nested') {
+    const currentType = this._nodeType.value;
+
+    if (currentType === null) {
+      this._nodeType.next(newType);
+    } else if ((typeof ngDevMode === 'undefined' || ngDevMode) && currentType !== newType) {
+      console.warn(
+        `Tree is using conflicting node types which can cause unexpected behavior. ` +
+          `Please use tree nodes of the same type (e.g. only flat or only nested). ` +
+          `Current node type: "${currentType}", new node type "${newType}".`,
+      );
     }
   }
 
@@ -1169,6 +1177,7 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
   _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   protected _tree = inject<CdkTree<T, K>>(CdkTree);
   protected _tabindex: number | null = -1;
+  protected readonly _type: 'flat' | 'nested' = 'flat';
 
   /**
    * The role of the tree node.
@@ -1368,10 +1377,8 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
         map(() => this.isExpanded),
         distinctUntilChanged(),
       )
-      .subscribe(() => {
-        this._changeDetectorRef.markForCheck();
-      });
-    this._tree._setNodeTypeIfUnset('flat');
+      .subscribe(() => this._changeDetectorRef.markForCheck());
+    this._tree._setNodeTypeIfUnset(this._type);
     this._tree._registerNode(this);
   }
 
diff --git a/src/material/tree/testing/tree-harness.spec.ts b/src/material/tree/testing/tree-harness.spec.ts
index a5dd4e17fd44..c281d4d28b4e 100644
--- a/src/material/tree/testing/tree-harness.spec.ts
+++ b/src/material/tree/testing/tree-harness.spec.ts
@@ -235,9 +235,9 @@ interface ExampleFlatNode {
     </mat-tree>
     <mat-tree [dataSource]="nestedTreeDataSource" [treeControl]="nestedTreeControl">
       <!-- This is the tree node template for leaf nodes -->
-      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
+      <mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
         {{node.name}}
-      </mat-tree-node>
+      </mat-nested-tree-node>
       <!-- This is the tree node template for expandable nodes -->
       <mat-nested-tree-node *matTreeNodeDef="let node; when: nestedTreeHasChild" isExpandable>
         <button matTreeNodeToggle>
diff --git a/tools/public_api_guard/cdk/tree.md b/tools/public_api_guard/cdk/tree.md
index 655f0f2c5456..dda4541d9306 100644
--- a/tools/public_api_guard/cdk/tree.md
+++ b/tools/public_api_guard/cdk/tree.md
@@ -54,7 +54,7 @@ export abstract class BaseTreeControl<T, K = T> implements TreeControl<T, K> {
 export const CDK_TREE_NODE_OUTLET_NODE: InjectionToken<{}>;
 
 // @public
-export class CdkNestedTreeNode<T, K = T> extends CdkTreeNode<T, K> implements AfterContentInit, OnDestroy, OnInit {
+export class CdkNestedTreeNode<T, K = T> extends CdkTreeNode<T, K> implements AfterContentInit, OnDestroy {
     constructor(...args: unknown[]);
     protected _children: T[];
     protected _clear(): void;
@@ -64,9 +64,9 @@ export class CdkNestedTreeNode<T, K = T> extends CdkTreeNode<T, K> implements Af
     ngAfterContentInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
-    // (undocumented)
-    ngOnInit(): void;
     nodeOutlet: QueryList<CdkTreeNodeOutlet>;
+    // (undocumented)
+    protected _type: 'flat' | 'nested';
     protected updateChildrenNodes(children?: T[]): void;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkNestedTreeNode<any, any>, "cdk-nested-tree-node", ["cdkNestedTreeNode"], {}, {}, ["nodeOutlet"], never, true, never>;
@@ -118,7 +118,7 @@ export class CdkTree<T, K = T> implements AfterContentChecked, AfterContentInit,
     _registerNode(node: CdkTreeNode<T, K>): void;
     renderNodeChanges(data: readonly T[], dataDiffer?: IterableDiffer<T>, viewContainer?: ViewContainerRef, parentData?: T): void;
     protected _sendKeydownToKeyManager(event: KeyboardEvent): void;
-    _setNodeTypeIfUnset(nodeType: 'flat' | 'nested'): void;
+    _setNodeTypeIfUnset(newType: 'flat' | 'nested'): void;
     toggle(dataNode: T): void;
     toggleDescendants(dataNode: T): void;
     trackBy: TrackByFunction<T>;
@@ -205,6 +205,8 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     protected _tabindex: number | null;
     // (undocumented)
     protected _tree: CdkTree<T, K>;
+    // (undocumented)
+    protected readonly _type: 'flat' | 'nested';
     typeaheadLabel: string | null;
     unfocus(): void;
     // (undocumented)

From 188fc720e4b0aa36c25b6ea370e2068234c7ddc5 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 11 Nov 2024 19:23:11 +0100
Subject: [PATCH 2/2] docs(material/tree): fixed mixed node types

Fixes docs that were combining flat and nested tree nodes.
---
 .../tree-nested-child-accessor-overview-example.css           | 2 +-
 .../tree-nested-child-accessor-overview-example.html          | 4 ++--
 .../tree-nested-overview/tree-nested-overview-example.css     | 2 +-
 .../tree-nested-overview/tree-nested-overview-example.html    | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.css b/src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.css
index 2d1a32aa5732..ff730a9522f0 100644
--- a/src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.css
+++ b/src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.css
@@ -21,6 +21,6 @@
  * Leaf nodes need to have padding so as to align with other non-leaf nodes
  * under the same parent.
  */
-.example-tree div[role=group] > .mat-tree-node {
+.example-tree div[role=group] > .mat-nested-tree-node {
   padding-left: 40px;
 }
diff --git a/src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.html b/src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.html
index c18934525142..2d68f780f514 100644
--- a/src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.html
+++ b/src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.html
@@ -2,9 +2,9 @@
   <!-- This is the tree node template for leaf nodes -->
   <!-- There is inline padding applied to this node using styles.
     This padding value depends on the mat-icon-button width. -->
-  <mat-tree-node *matTreeNodeDef="let node">
+  <mat-nested-tree-node *matTreeNodeDef="let node">
     {{node.name}}
-  </mat-tree-node>
+  </mat-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <mat-nested-tree-node
       *matTreeNodeDef="let node; when: hasChild"
diff --git a/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.css b/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.css
index 2d1a32aa5732..ff730a9522f0 100644
--- a/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.css
+++ b/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.css
@@ -21,6 +21,6 @@
  * Leaf nodes need to have padding so as to align with other non-leaf nodes
  * under the same parent.
  */
-.example-tree div[role=group] > .mat-tree-node {
+.example-tree div[role=group] > .mat-nested-tree-node {
   padding-left: 40px;
 }
diff --git a/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.html b/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.html
index c827115b1680..93b8b82f2335 100644
--- a/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.html
+++ b/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.html
@@ -2,9 +2,9 @@
   <!-- This is the tree node template for leaf nodes -->
   <!-- There is inline padding applied to this node using styles.
     This padding value depends on the mat-icon-button width. -->
-  <mat-tree-node *matTreeNodeDef="let node">
+  <mat-nested-tree-node *matTreeNodeDef="let node">
     {{node.name}}
-  </mat-tree-node>
+  </mat-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <mat-nested-tree-node
       *matTreeNodeDef="let node; when: hasChild"