main - b5fbf52 docs: correct treeNodeDef selectors (#31421)

Author: pweyrich

docs-content/overviews/cdk/tree/tree.md.html

@@ -50,9 +50,9 @@ <h4 id="writing-your-tree-template" class="docs-header-link">
 <code>&lt;cdk-tree-node&gt;</code> for flat tree and <code>&lt;cdk-nested-tree-node&gt;</code> for nested tree. The tree node
 template defines the look of the tree node, expansion/collapsing control and the structure for
 nested children nodes.</p>
-<p>A node definition is specified via any element with <code>cdkNodeDef</code>. This directive exports the node
+<p>A node definition is specified via any element with <code>cdkTreeNodeDef</code>. This directive exports the node
 data to be used in any bindings in the node template.</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span> *<span class="hljs-attr">cdkNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span> *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>&gt;</span>
   {{node.key}}: {{node.value}}
 <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-tree-node</span>&gt;</span></code></pre>
         <h5 id="flat-tree-node-template" class="docs-header-link">
@@ -71,7 +71,7 @@ <h5 id="nested-tree-node-template" class="docs-header-link">
         </h5>
       <p>When using nested tree nodes, the node template must contain a <code>cdkTreeNodeOutlet</code>, which marks
 where the children of the node will be rendered.</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-nested-tree-node</span> *<span class="hljs-attr">cdkNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-nested-tree-node</span> *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>&gt;</span>
   {{node.value}}
   <span class="hljs-tag">&lt;<span class="hljs-name">ng-container</span> <span class="hljs-attr">cdkTreeNodeOutlet</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">ng-container</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-nested-tree-node</span>&gt;</span></code></pre>
@@ -84,7 +84,7 @@ <h4 id="adding-expandcollapse" class="docs-header-link">
 a tree node recursively by setting <code>[cdkTreeNodeToggleRecursive]</code> to true.</p>
 <p><code>cdkTreeNodeToggle</code> should be attached to button elements, and will trigger upon click or keyboard
 activation. For icon buttons, ensure that <code>aria-label</code> is provided.</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span> *<span class="hljs-attr">cdkNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span> *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">cdkTreeNodeToggle</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;toggle tree node&quot;</span> [<span class="hljs-attr">cdkTreeNodeToggleRecursive</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>expand<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>
@@ -96,7 +96,7 @@ <h4 id="padding-flat-tree-only" class="docs-header-link">
         </h4>
       <p>The <code>cdkTreeNodePadding</code> directive can be placed in a flat tree&#39;s node template to display the level
 information of a flat tree node.</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span> *<span class="hljs-attr">cdkNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span> <span class="hljs-attr">cdkNodePadding</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span> *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span> <span class="hljs-attr">cdkNodePadding</span>&gt;</span>
   {{node.value}}
 <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-tree-node</span>&gt;</span></code></pre><p>This is unnecessary for a nested tree, since the hierarchical structure of the DOM allows for
 padding to be added via CSS.</p>
@@ -107,10 +107,10 @@ <h4 id="conditional-template" class="docs-header-link">
         </h4>
       <p>The tree may include multiple node templates, where a template is chosen
 for a particular data node via the <code>when</code> predicate of the template.</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span> *<span class="hljs-attr">cdkNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span> <span class="hljs-attr">cdkTreeNodePadding</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span> *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span> <span class="hljs-attr">cdkTreeNodePadding</span>&gt;</span>
   {{node.value}}
 <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-tree-node</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span> *<span class="hljs-attr">cdkNodeDef</span>=<span class="hljs-string">&quot;let node; when: isSpecial&quot;</span> <span class="hljs-attr">cdkTreeNodePadding</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span> *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node; when: isSpecial&quot;</span> <span class="hljs-attr">cdkTreeNodePadding</span>&gt;</span>
   [ A special node {{node.value}} ]
 <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-tree-node</span>&gt;</span></code></pre>
         <h3 id="data-source" class="docs-header-link">
@@ -188,9 +188,9 @@ <h4 id="activation-actions" class="docs-header-link">
 <code>(activation)</code> events that can be listened to when the user activates a node via keyboard
 interaction.</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">cdk-tree-node</span>
-    *<span class="hljs-attr">cdkNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>
+    *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>
     (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;performAction(node)&quot;</span>
     (<span class="hljs-attr">activation</span>)=<span class="hljs-string">&quot;performAction($event)&quot;</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-tree-node</span>&gt;</span></code></pre><p>In this example, <code>$event</code> contains the node&#39;s data and is equivalent to the implicit data passed in
-the <code>cdkNodeDef</code> context.</p>
+the <code>cdkTreeNodeDef</code> context.</p>
 </div>

docs-content/overviews/material/tree/tree.md.html

@@ -51,9 +51,9 @@ <h4 id="writing-your-tree-template" class="docs-header-link">
 <code>&lt;mat-tree-node&gt;</code> for flat tree and <code>&lt;mat-nested-tree-node&gt;</code> for nested tree. The tree node
 template defines the look of the tree node, expansion/collapsing control and the structure for
 nested children nodes.</p>
-<p>A node definition is specified via any element with <code>matNodeDef</code>. This directive exports the node
+<p>A node definition is specified via any element with <code>matTreeNodeDef</code>. This directive exports the node
 data to be used in any bindings in the node template.</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-tree-node</span> *<span class="hljs-attr">matNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>&gt;</span>
+<pre><code class="language-html"><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>&gt;</span>
   {{node.key}}: {{node.value}}
 <span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree-node</span>&gt;</span></code></pre>
         <h5 id="flat-tree-node-template" class="docs-header-link">
@@ -72,7 +72,7 @@ <h5 id="nested-tree-node-template" class="docs-header-link">
         </h5>
       <p>When using nested tree nodes, the node template must contain a <code>matTreeNodeOutlet</code>, which marks
 where the children of the node will be rendered.</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-nested-tree-node</span> *<span class="hljs-attr">matNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-nested-tree-node</span> *<span class="hljs-attr">matTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>&gt;</span>
   {{node.value}}
   <span class="hljs-tag">&lt;<span class="hljs-name">ng-container</span> <span class="hljs-attr">matTreeNodeOutlet</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">ng-container</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">mat-nested-tree-node</span>&gt;</span></code></pre>
@@ -85,7 +85,7 @@ <h4 id="adding-expandcollapse" class="docs-header-link">
 a tree node recursively by setting <code>[matTreeNodeToggleRecursive]</code> to true.</p>
 <p><code>matTreeNodeToggle</code> should be attached to button elements, and will trigger upon click or keyboard
 activation. For icon buttons, ensure that <code>aria-label</code> is provided.</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-tree-node</span> *<span class="hljs-attr">matNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>&gt;</span>
+<pre><code class="language-html"><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>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matTreeNodeToggle</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;toggle tree node&quot;</span> [<span class="hljs-attr">matTreeNodeToggleRecursive</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>expand<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>
@@ -106,7 +106,7 @@ <h3 id="padding-flat-tree-only" class="docs-header-link">
         </h3>
       <p>The <code>matTreeNodePadding</code> can be placed in a flat tree&#39;s node template to display the <code>level</code>
 information of a flat tree node.</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-tree-node</span> *<span class="hljs-attr">matNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span> <span class="hljs-attr">matNodePadding</span>&gt;</span>
+<pre><code class="language-html"><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">matNodePadding</span>&gt;</span>
   {{node.value}}
 <span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree-node</span>&gt;</span></code></pre><p>This is unnecessary for a nested tree, since the hierarchical structure of the DOM allows for
 padding to be added via CSS.</p>
@@ -117,10 +117,10 @@ <h4 id="conditional-template" class="docs-header-link">
         </h4>
       <p>The tree may include multiple node templates, where a template is chosen
 for a particular data node via the <code>when</code> predicate of the template.</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-tree-node</span> *<span class="hljs-attr">matNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span> <span class="hljs-attr">matTreeNodePadding</span>&gt;</span>
+<pre><code class="language-html"><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>
   {{node.value}}
 <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">matNodeDef</span>=<span class="hljs-string">&quot;let node; when: isSpecial&quot;</span> <span class="hljs-attr">matTreeNodePadding</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: isSpecial&quot;</span> <span class="hljs-attr">matTreeNodePadding</span>&gt;</span>
   [ A special node {{node.value}} ]
 <span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree-node</span>&gt;</span></code></pre>
         <h3 id="data-source" class="docs-header-link">
@@ -198,9 +198,9 @@ <h4 id="activation-actions" class="docs-header-link">
 <code>(activation)</code> events that can be listened to when the user activates a node via keyboard
 interaction.</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-tree-node</span>
-    *<span class="hljs-attr">matNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>
+    *<span class="hljs-attr">matTreeNodeDef</span>=<span class="hljs-string">&quot;let node&quot;</span>
     (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;performAction(node)&quot;</span>
     (<span class="hljs-attr">activation</span>)=<span class="hljs-string">&quot;performAction($event)&quot;</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree-node</span>&gt;</span></code></pre><p>In this example, <code>$event</code> contains the node&#39;s data and is equivalent to the implicit data passed in
-the <code>matNodeDef</code> context.</p>
+the <code>matTreeNodeDef</code> context.</p>
 </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/components-examples",
-  "version": "20.1.0-next.2+sha-4052130",
+  "version": "20.1.0-next.2+sha-b5fbf52",
   "description": "Angular Components Examples",
   "private": true,
   "repository": {
@@ -259,15 +259,15 @@
   },
   "homepage": "https://github.com/angular/components#readme",
   "peerDependencies": {
-    "@angular/cdk": "20.1.0-next.2+sha-4052130",
-    "@angular/cdk-experimental": "20.1.0-next.2+sha-4052130",
+    "@angular/cdk": "20.1.0-next.2+sha-b5fbf52",
+    "@angular/cdk-experimental": "20.1.0-next.2+sha-b5fbf52",
     "@angular/core": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
     "@angular/common": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
-    "@angular/material": "20.1.0-next.2+sha-4052130",
-    "@angular/material-experimental": "20.1.0-next.2+sha-4052130",
-    "@angular/material-moment-adapter": "20.1.0-next.2+sha-4052130",
-    "@angular/material-luxon-adapter": "20.1.0-next.2+sha-4052130",
-    "@angular/material-date-fns-adapter": "20.1.0-next.2+sha-4052130"
+    "@angular/material": "20.1.0-next.2+sha-b5fbf52",
+    "@angular/material-experimental": "20.1.0-next.2+sha-b5fbf52",
+    "@angular/material-moment-adapter": "20.1.0-next.2+sha-b5fbf52",
+    "@angular/material-luxon-adapter": "20.1.0-next.2+sha-b5fbf52",
+    "@angular/material-date-fns-adapter": "20.1.0-next.2+sha-b5fbf52"
   },
   "devDependencies": {
     "@angular/cdk": "workspace:*",