From 2c6b74631ff804f6cf3ac79a95d106bd5f84b413 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 8 Jun 2026 09:42:28 +0200
Subject: [PATCH] docs(material/tree): dynamic example not updating

Fixes that the dynamic tree example didn't render any data once it loads.

Fixes #33336.
---
 .../tree/tree-dynamic/tree-dynamic-example.html    |  4 ++--
 .../tree/tree-dynamic/tree-dynamic-example.ts      | 14 ++++++--------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.html b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.html
index 6ece80fd7c3f..ffec8e6f66ef 100644
--- a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.html
+++ b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.html
@@ -1,4 +1,4 @@
-<mat-tree #tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
+<mat-tree #tree [dataSource]="dataSource()" [childrenAccessor]="childrenAccessor">
   <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
     <button matIconButton disabled></button>
     {{node.name}}
@@ -15,4 +15,4 @@
     <mat-progress-bar mode="indeterminate" class="example-tree-progress-bar"></mat-progress-bar>
     }
   </mat-tree-node>
-</mat-tree>
\ No newline at end of file
+</mat-tree>
diff --git a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts
index 3dd02c9de58e..2a72216ea8a3 100644
--- a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts
+++ b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts
@@ -1,4 +1,4 @@
-import {Component, Service, inject, signal} from '@angular/core';
+import {Component, Service, WritableSignal, inject, signal} from '@angular/core';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
@@ -9,7 +9,7 @@ interface DynamicNode {
   name: string;
   level: number;
   expandable: boolean;
-  isLoading: ReturnType<typeof signal<boolean>>;
+  isLoading: WritableSignal<boolean>;
   children?: DynamicNode[];
 }
 
@@ -63,12 +63,9 @@ export class DynamicDatabase {
 })
 export class TreeDynamicExample {
   private _database = inject(DynamicDatabase);
-
-  dataSource = this._database.initialData();
-
-  childrenAccessor = (node: DynamicNode) => node.children ?? [];
-
-  hasChild = (_: number, node: DynamicNode) => node.expandable;
+  readonly dataSource = signal(this._database.initialData());
+  readonly childrenAccessor = (node: DynamicNode) => node.children ?? [];
+  readonly hasChild = (_: number, node: DynamicNode) => node.expandable;
 
   /**
    * Load children on node expansion.
@@ -93,6 +90,7 @@ export class TreeDynamicExample {
         this._database.createNode(name, node.level + 1, this._database.isExpandable(name)),
       );
       node.isLoading.set(false);
+      this.dataSource.set([...this.dataSource()]);
     }, 1000);
   }
 }