Skip to content

Commit b5fbf52

Browse files
authored
docs: correct treeNodeDef selectors (#31421)
1 parent 4052130 commit b5fbf52

File tree

2 files changed

+18
-18
lines changed

2 files changed

+18
-18
lines changed

src/cdk/tree/tree.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ In order to use the tree, you must define a tree node template. There are two ty
5555
template defines the look of the tree node, expansion/collapsing control and the structure for
5656
nested children nodes.
5757

58-
A node definition is specified via any element with `cdkNodeDef`. This directive exports the node
58+
A node definition is specified via any element with `cdkTreeNodeDef`. This directive exports the node
5959
data to be used in any bindings in the node template.
6060

6161
```html
62-
<cdk-tree-node *cdkNodeDef="let node">
62+
<cdk-tree-node *cdkTreeNodeDef="let node">
6363
{{node.key}}: {{node.value}}
6464
</cdk-tree-node>
6565
```
@@ -80,7 +80,7 @@ When using nested tree nodes, the node template must contain a `cdkTreeNodeOutle
8080
where the children of the node will be rendered.
8181

8282
```html
83-
<cdk-nested-tree-node *cdkNodeDef="let node">
83+
<cdk-nested-tree-node *cdkTreeNodeDef="let node">
8484
{{node.value}}
8585
<ng-container cdkTreeNodeOutlet></ng-container>
8686
</cdk-nested-tree-node>
@@ -96,7 +96,7 @@ a tree node recursively by setting `[cdkTreeNodeToggleRecursive]` to true.
9696
activation. For icon buttons, ensure that `aria-label` is provided.
9797

9898
```html
99-
<cdk-tree-node *cdkNodeDef="let node">
99+
<cdk-tree-node *cdkTreeNodeDef="let node">
100100
<button cdkTreeNodeToggle aria-label="toggle tree node" [cdkTreeNodeToggleRecursive]="true">
101101
<mat-icon>expand</mat-icon>
102102
</button>
@@ -110,7 +110,7 @@ The `cdkTreeNodePadding` directive can be placed in a flat tree's node template
110110
information of a flat tree node.
111111

112112
```html
113-
<cdk-tree-node *cdkNodeDef="let node" cdkNodePadding>
113+
<cdk-tree-node *cdkTreeNodeDef="let node" cdkNodePadding>
114114
{{node.value}}
115115
</cdk-tree-node>
116116
```
@@ -125,10 +125,10 @@ The tree may include multiple node templates, where a template is chosen
125125
for a particular data node via the `when` predicate of the template.
126126

127127
```html
128-
<cdk-tree-node *cdkNodeDef="let node" cdkTreeNodePadding>
128+
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding>
129129
{{node.value}}
130130
</cdk-tree-node>
131-
<cdk-tree-node *cdkNodeDef="let node; when: isSpecial" cdkTreeNodePadding>
131+
<cdk-tree-node *cdkTreeNodeDef="let node; when: isSpecial" cdkTreeNodePadding>
132132
[ A special node {{node.value}} ]
133133
</cdk-tree-node>
134134
```
@@ -200,11 +200,11 @@ interaction.
200200

201201
```html
202202
<cdk-tree-node
203-
*cdkNodeDef="let node"
203+
*cdkTreeNodeDef="let node"
204204
(click)="performAction(node)"
205205
(activation)="performAction($event)">
206206
</cdk-tree-node>
207207
```
208208

209209
In this example, `$event` contains the node's data and is equivalent to the implicit data passed in
210-
the `cdkNodeDef` context.
210+
the `cdkTreeNodeDef` context.

src/material/tree/tree.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ In order to use the tree, you must define a tree node template. There are two ty
5555
template defines the look of the tree node, expansion/collapsing control and the structure for
5656
nested children nodes.
5757

58-
A node definition is specified via any element with `matNodeDef`. This directive exports the node
58+
A node definition is specified via any element with `matTreeNodeDef`. This directive exports the node
5959
data to be used in any bindings in the node template.
6060

6161
```html
62-
<mat-tree-node *matNodeDef="let node">
62+
<mat-tree-node *matTreeNodeDef="let node">
6363
{{node.key}}: {{node.value}}
6464
</mat-tree-node>
6565
```
@@ -80,7 +80,7 @@ When using nested tree nodes, the node template must contain a `matTreeNodeOutle
8080
where the children of the node will be rendered.
8181

8282
```html
83-
<mat-nested-tree-node *matNodeDef="let node">
83+
<mat-nested-tree-node *matTreeNodeDef="let node">
8484
{{node.value}}
8585
<ng-container matTreeNodeOutlet></ng-container>
8686
</mat-nested-tree-node>
@@ -96,7 +96,7 @@ a tree node recursively by setting `[matTreeNodeToggleRecursive]` to true.
9696
activation. For icon buttons, ensure that `aria-label` is provided.
9797

9898
```html
99-
<mat-tree-node *matNodeDef="let node">
99+
<mat-tree-node *matTreeNodeDef="let node">
100100
<button matTreeNodeToggle aria-label="toggle tree node" [matTreeNodeToggleRecursive]="true">
101101
<mat-icon>expand</mat-icon>
102102
</button>
@@ -119,7 +119,7 @@ The `matTreeNodePadding` can be placed in a flat tree's node template to display
119119
information of a flat tree node.
120120

121121
```html
122-
<mat-tree-node *matNodeDef="let node" matNodePadding>
122+
<mat-tree-node *matTreeNodeDef="let node" matNodePadding>
123123
{{node.value}}
124124
</mat-tree-node>
125125
```
@@ -134,10 +134,10 @@ The tree may include multiple node templates, where a template is chosen
134134
for a particular data node via the `when` predicate of the template.
135135

136136
```html
137-
<mat-tree-node *matNodeDef="let node" matTreeNodePadding>
137+
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
138138
{{node.value}}
139139
</mat-tree-node>
140-
<mat-tree-node *matNodeDef="let node; when: isSpecial" matTreeNodePadding>
140+
<mat-tree-node *matTreeNodeDef="let node; when: isSpecial" matTreeNodePadding>
141141
[ A special node {{node.value}} ]
142142
</mat-tree-node>
143143
```
@@ -209,11 +209,11 @@ interaction.
209209

210210
```html
211211
<mat-tree-node
212-
*matNodeDef="let node"
212+
*matTreeNodeDef="let node"
213213
(click)="performAction(node)"
214214
(activation)="performAction($event)">
215215
</mat-tree-node>
216216
```
217217

218218
In this example, `$event` contains the node's data and is equivalent to the implicit data passed in
219-
the `matNodeDef` context.
219+
the `matTreeNodeDef` context.

0 commit comments

Comments
 (0)