Skip to content

docs: correct treeNodeDef selectors #31421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 26, 2025
Merged

docs: correct treeNodeDef selectors #31421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/cdk/tree/tree.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ In order to use the tree, you must define a tree node template. There are two ty
template defines the look of the tree node, expansion/collapsing control and the structure for
nested children nodes.

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

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

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

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

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

```html
<cdk-tree-node *cdkNodeDef="let node" cdkTreeNodePadding>
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding>
{{node.value}}
</cdk-tree-node>
<cdk-tree-node *cdkNodeDef="let node; when: isSpecial" cdkTreeNodePadding>
<cdk-tree-node *cdkTreeNodeDef="let node; when: isSpecial" cdkTreeNodePadding>
[ A special node {{node.value}} ]
</cdk-tree-node>
```
Expand Down Expand Up @@ -200,11 +200,11 @@ interaction.

```html
<cdk-tree-node
*cdkNodeDef="let node"
*cdkTreeNodeDef="let node"
(click)="performAction(node)"
(activation)="performAction($event)">
</cdk-tree-node>
```

In this example, `$event` contains the node's data and is equivalent to the implicit data passed in
the `cdkNodeDef` context.
the `cdkTreeNodeDef` context.
18 changes: 9 additions & 9 deletions src/material/tree/tree.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ In order to use the tree, you must define a tree node template. There are two ty
template defines the look of the tree node, expansion/collapsing control and the structure for
nested children nodes.

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

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

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

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

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

```html
<mat-tree-node *matNodeDef="let node" matTreeNodePadding>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
{{node.value}}
</mat-tree-node>
<mat-tree-node *matNodeDef="let node; when: isSpecial" matTreeNodePadding>
<mat-tree-node *matTreeNodeDef="let node; when: isSpecial" matTreeNodePadding>
[ A special node {{node.value}} ]
</mat-tree-node>
```
Expand Down Expand Up @@ -209,11 +209,11 @@ interaction.

```html
<mat-tree-node
*matNodeDef="let node"
*matTreeNodeDef="let node"
(click)="performAction(node)"
(activation)="performAction($event)">
</mat-tree-node>
```

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