docs(material/tree): switch example to signals (#29552)

Author: andrewseguin

src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.html

@@ -12,7 +12,7 @@
       </mat-icon>
     </button>
     {{node.item}}
-    @if (node.isLoading) {
+    @if (node.isLoading()) {
       <mat-progress-bar
           mode="indeterminate"
           class="example-tree-progress-bar"></mat-progress-bar>

src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts

@@ -1,6 +1,6 @@
 import {CollectionViewer, SelectionChange, DataSource} from '@angular/cdk/collections';
 import {FlatTreeControl} from '@angular/cdk/tree';
-import {ChangeDetectionStrategy, Component, Injectable, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Injectable, inject, signal} from '@angular/core';
 import {BehaviorSubject, merge, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
@@ -14,7 +14,7 @@ export class DynamicFlatNode {
     public item: string,
     public level = 1,
     public expandable = false,
-    public isLoading = false,
+    public isLoading = signal(false),
   ) {}
 }
 
@@ -108,7 +108,7 @@ export class DynamicDataSource implements DataSource<DynamicFlatNode> {
       return;
     }
 
-    node.isLoading = true;
+    node.isLoading.set(true);
 
     setTimeout(() => {
       if (expand) {
@@ -128,7 +128,7 @@ export class DynamicDataSource implements DataSource<DynamicFlatNode> {
 
       // notify the change
       this.dataChange.next(this.data);
-      node.isLoading = false;
+      node.isLoading.set(false);
     }, 1000);
   }
 }