main - 9055ac5 docs(material/tree): update examples to use modern childrenAccessor API (#32751)

Author: olagokemills

docs-content/examples-highlighted/material/tree/tree-dynamic/tree-dynamic-example-html.html

@@ -1,21 +1,18 @@
-<span class="hljs-tag">&lt;<span class="hljs-name">mat-tree</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource&quot;</span> [<span class="hljs-attr">treeControl</span>]=<span class="hljs-string">&quot;treeControl&quot;</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-tree</span> #<span class="hljs-attr">tree</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource&quot;</span> [<span class="hljs-attr">childrenAccessor</span>]=<span class="hljs-string">&quot;childrenAccessor&quot;</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">mat-tree-node</span> *<span class="hljs-attr">matTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span> <span class="hljs-attr">matTreeNodePadding</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matIconButton</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    {{node.item}}
+    {{node.name}}
   <span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree-node</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">mat-tree-node</span> *<span class="hljs-attr">matTreeNodeDef</span>=<span class="hljs-string">&quot;let node; when: hasChild&quot;</span> <span class="hljs-attr">matTreeNodePadding</span> <span class="hljs-attr">matTreeNodeToggle</span>
-                [<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.item&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matIconButton</span>
-            [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.item&quot;</span> <span class="hljs-attr">matTreeNodeToggle</span>&gt;</span>
+    [<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.name&quot;</span> (<span class="hljs-attr">expandedChange</span>)=<span class="hljs-string">&quot;onNodeExpanded(node, $event)&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matIconButton</span> [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span> <span class="hljs-attr">matTreeNodeToggle</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-icon-rtl-mirror&quot;</span>&gt;</span>
-        {{treeControl.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
+        {{tree.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
       <span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    {{node.item}}
+    {{node.name}}
     @if (node.isLoading()) {
-      <span class="hljs-tag">&lt;<span class="hljs-name">mat-progress-bar</span>
-          <span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;indeterminate&quot;</span>
-          <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-progress-bar&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">mat-progress-bar</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">mat-progress-bar</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;indeterminate&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-progress-bar&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">mat-progress-bar</span>&gt;</span>
     }
   <span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree-node</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree</span>&gt;</span>

docs-content/examples-highlighted/material/tree/tree-dynamic/tree-dynamic-example-ts.html

@@ -1,4 +1,4 @@
-<span class="hljs-tag">&lt;<span class="hljs-name">mat-tree</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource&quot;</span> [<span class="hljs-attr">treeControl</span>]=<span class="hljs-string">&quot;treeControl&quot;</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-tree</span> #<span class="hljs-attr">tree</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource&quot;</span> [<span class="hljs-attr">childrenAccessor</span>]=<span class="hljs-string">&quot;childrenAccessor&quot;</span>&gt;</span>
   <span class="hljs-comment">&lt;!-- This is the tree node template for leaf nodes --&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">mat-tree-node</span> *<span class="hljs-attr">matTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span> <span class="hljs-attr">matTreeNodePadding</span>&gt;</span>
     <span class="hljs-comment">&lt;!-- use a disabled button to provide padding for tree leaf --&gt;</span>
@@ -11,7 +11,7 @@
     <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matIconButton</span> <span class="hljs-attr">matTreeNodeToggle</span>
             [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-icon-rtl-mirror&quot;</span>&gt;</span>
-        {{treeControl.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
+        {{tree.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
       <span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
     {{node.name}}

docs-content/examples-highlighted/material/tree/tree-flat-overview/tree-flat-overview-example-html.html

@@ -1,6 +1,5 @@
-<span class="hljs-keyword">import</span> {<span class="hljs-title class_">FlatTreeControl</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/tree&#x27;</span>;
 <span class="hljs-keyword">import</span> {<span class="hljs-title class_">ChangeDetectionStrategy</span>, <span class="hljs-title class_">Component</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
-<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatTreeFlatDataSource</span>, <span class="hljs-title class_">MatTreeFlattener</span>, <span class="hljs-title class_">MatTreeModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/tree&#x27;</span>;
+<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatTreeModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/tree&#x27;</span>;
 <span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatIconModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/icon&#x27;</span>;
 <span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatButtonModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/button&#x27;</span>;
 
@@ -13,13 +12,6 @@
   <span class="hljs-attr">children</span>?: <span class="hljs-title class_">FoodNode</span>[];
 }
 
-<span class="hljs-comment">/** Flat node with expandable and level information */</span>
-<span class="hljs-keyword">interface</span> <span class="hljs-title class_">ExampleFlatNode</span> {
-  <span class="hljs-attr">expandable</span>: <span class="hljs-built_in">boolean</span>;
-  <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>;
-  <span class="hljs-attr">level</span>: <span class="hljs-built_in">number</span>;
-}
-
 <span class="hljs-comment">/**
  * <span class="hljs-doctag">@title</span> Tree with flat nodes
  */</span>
@@ -30,33 +22,11 @@
   <span class="hljs-attr">changeDetection</span>: <span class="hljs-title class_">ChangeDetectionStrategy</span>.<span class="hljs-property">OnPush</span>,
 })
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TreeFlatOverviewExample</span> {
-  <span class="hljs-keyword">private</span> _transformer = <span class="hljs-function">(<span class="hljs-params"><span class="hljs-attr">node</span>: <span class="hljs-title class_">FoodNode</span>, <span class="hljs-attr">level</span>: <span class="hljs-built_in">number</span></span>) =&gt;</span> {
-    <span class="hljs-keyword">return</span> {
-      <span class="hljs-attr">expandable</span>: !!node.<span class="hljs-property">children</span> &amp;&amp; node.<span class="hljs-property">children</span>.<span class="hljs-property">length</span> &gt; <span class="hljs-number">0</span>,
-      <span class="hljs-attr">name</span>: node.<span class="hljs-property">name</span>,
-      <span class="hljs-attr">level</span>: level,
-    };
-  };
-
-  treeControl = <span class="hljs-keyword">new</span> <span class="hljs-title class_">FlatTreeControl</span>&lt;<span class="hljs-title class_">ExampleFlatNode</span>&gt;(
-    <span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> node.<span class="hljs-property">level</span>,
-    <span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> node.<span class="hljs-property">expandable</span>,
-  );
-
-  treeFlattener = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MatTreeFlattener</span>(
-    <span class="hljs-variable language_">this</span>.<span class="hljs-property">_transformer</span>,
-    <span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> node.<span class="hljs-property">level</span>,
-    <span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> node.<span class="hljs-property">expandable</span>,
-    <span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> node.<span class="hljs-property">children</span>,
-  );
-
-  dataSource = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MatTreeFlatDataSource</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">treeControl</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">treeFlattener</span>);
+  dataSource = <span class="hljs-variable constant_">EXAMPLE_DATA</span>;
 
-  <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>) {
-    <span class="hljs-variable language_">this</span>.<span class="hljs-property">dataSource</span>.<span class="hljs-property">data</span> = <span class="hljs-variable constant_">EXAMPLE_DATA</span>;
-  }
+  childrenAccessor = <span class="hljs-function">(<span class="hljs-params"><span class="hljs-attr">node</span>: <span class="hljs-title class_">FoodNode</span></span>) =&gt;</span> node.<span class="hljs-property">children</span> ?? [];
 
-  hasChild = <span class="hljs-function">(<span class="hljs-params"><span class="hljs-attr">_</span>: <span class="hljs-built_in">number</span>, <span class="hljs-attr">node</span>: <span class="hljs-title class_">ExampleFlatNode</span></span>) =&gt;</span> node.<span class="hljs-property">expandable</span>;
+  hasChild = <span class="hljs-function">(<span class="hljs-params"><span class="hljs-attr">_</span>: <span class="hljs-built_in">number</span>, <span class="hljs-attr">node</span>: <span class="hljs-title class_">FoodNode</span></span>) =&gt;</span> !!node.<span class="hljs-property">children</span> &amp;&amp; node.<span class="hljs-property">children</span>.<span class="hljs-property">length</span> &gt; <span class="hljs-number">0</span>;
 }
 
 <span class="hljs-keyword">const</span> <span class="hljs-attr">EXAMPLE_DATA</span>: <span class="hljs-title class_">FoodNode</span>[] = [

docs-content/examples-highlighted/material/tree/tree-flat-overview/tree-flat-overview-example-ts.html

@@ -1,4 +1,4 @@
-<span class="hljs-tag">&lt;<span class="hljs-name">mat-tree</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource&quot;</span> [<span class="hljs-attr">treeControl</span>]=<span class="hljs-string">&quot;treeControl&quot;</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-tree</span> #<span class="hljs-attr">tree</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource&quot;</span> [<span class="hljs-attr">childrenAccessor</span>]=<span class="hljs-string">&quot;childrenAccessor&quot;</span>&gt;</span>
   <span class="hljs-comment">&lt;!-- This is the tree node template for leaf nodes --&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">mat-tree-node</span> *<span class="hljs-attr">matTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span> <span class="hljs-attr">matTreeNodePadding</span>&gt;</span>
     <span class="hljs-comment">&lt;!-- use a disabled button to provide padding for tree leaf --&gt;</span>
@@ -7,13 +7,12 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree-node</span>&gt;</span>
   <span class="hljs-comment">&lt;!-- This is the tree node template for expandable nodes --&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">mat-tree-node</span> *<span class="hljs-attr">matTreeNodeDef</span>=<span class="hljs-string">&quot;let node;when: hasChild&quot;</span> <span class="hljs-attr">matTreeNodePadding</span> <span class="hljs-attr">matTreeNodeToggle</span>
-                 [<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.name&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matIconButton</span> <span class="hljs-attr">matTreeNodeToggle</span>
-            [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span>&gt;</span>
+    [<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.name&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matIconButton</span> <span class="hljs-attr">matTreeNodeToggle</span> [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-icon-rtl-mirror&quot;</span>&gt;</span>
-        {{treeControl.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
+        {{tree.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
       <span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
     {{node.name}}
   <span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree-node</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree</span>&gt;</span>