Skip to content

Commit 724dc2f

Browse files
BobobUnicorncrisbeto
BobobUnicorn
authored and
crisbeto
committed
docs(material/tree): update examples on docs pages, add new childrenAccessor examples (#29752)
* docs(mat/tree): add childrenAccessor example for mat-tree flat * fix(mat/tree): fix imports * docs(mat/tree): add childrenAccessor example for nested mat-tree * fix(mat/tree): fix imports * fix(mat/tree): formatting (cherry picked from commit c4ca044)
1 parent f9e1810 commit 724dc2f

File tree

10 files changed

+194
-4
lines changed

10 files changed

+194
-4
lines changed

‎src/cdk/tree/tree.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ are rendered as siblings in sequence.
1919

2020
```
2121

22-
<!-- example(cdk-tree-flat) -->
22+
<!-- example(cdk-tree-flat-children-accessor) -->
2323

2424
Flat trees are generally easier to style and inspect. They are also more friendly to scrolling
2525
variations, such as infinite or virtual scrolling.
@@ -40,7 +40,7 @@ contains a node outlet into which children are projected.
4040
</cdk-tree>
4141
```
4242

43-
<!-- example(cdk-tree-nested) -->
43+
<!-- example(cdk-tree-nested-children-accessor) -->
4444

4545
Nested trees are easier to work with when hierarchical relationships are visually represented in
4646
ways that would be difficult to accomplish with flat nodes.

‎src/components-examples/material/tree/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
export {TreeDynamicExample} from './tree-dynamic/tree-dynamic-example';
22
export {TreeFlatOverviewExample} from './tree-flat-overview/tree-flat-overview-example';
3+
export {TreeFlatChildAccessorOverviewExample} from './tree-flat-child-accessor-overview/tree-flat-child-accessor-overview-example';
34
export {TreeHarnessExample} from './tree-harness/tree-harness-example';
45
export {TreeLoadmoreExample} from './tree-loadmore/tree-loadmore-example';
56
export {TreeNestedOverviewExample} from './tree-nested-overview/tree-nested-overview-example';
7+
export {TreeNestedChildAccessorOverviewExample} from './tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example';
68
export {TreeLegacyKeyboardInterfaceExample} from './tree-legacy-keyboard-interface/tree-legacy-keyboard-interface-example';

‎src/components-examples/material/tree/tree-flat-child-accessor-overview/tree-flat-child-accessor-overview-example.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<mat-tree #tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
2+
<!-- This is the tree node template for leaf nodes -->
3+
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
4+
<!-- use a disabled button to provide padding for tree leaf -->
5+
<button mat-icon-button disabled></button>
6+
{{node.name}}
7+
</mat-tree-node>
8+
<!-- This is the tree node template for expandable nodes -->
9+
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodeToggle
10+
[cdkTreeNodeTypeaheadLabel]="node.name">
11+
<button mat-icon-button matTreeNodeToggle
12+
[attr.aria-label]="'Toggle ' + node.name">
13+
<mat-icon class="mat-icon-rtl-mirror">
14+
{{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
15+
</mat-icon>
16+
</button>
17+
{{node.name}}
18+
</mat-tree-node>
19+
</mat-tree>

‎src/components-examples/material/tree/tree-flat-child-accessor-overview/tree-flat-child-accessor-overview-example.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {ChangeDetectionStrategy, Component} from '@angular/core';
2+
import {MatTreeModule} from '@angular/material/tree';
3+
import {MatIconModule} from '@angular/material/icon';
4+
import {MatButtonModule} from '@angular/material/button';
5+
6+
/**
7+
* Food data with nested structure.
8+
* Each node has a name and an optional list of children.
9+
*/
10+
interface FoodNode {
11+
name: string;
12+
children?: FoodNode[];
13+
}
14+
15+
const TREE_DATA: FoodNode[] = [
16+
{
17+
name: 'Fruit',
18+
children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}],
19+
},
20+
{
21+
name: 'Vegetables',
22+
children: [
23+
{
24+
name: 'Green',
25+
children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
26+
},
27+
{
28+
name: 'Orange',
29+
children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
30+
},
31+
],
32+
},
33+
];
34+
35+
/**
36+
* @title Tree with flat nodes (childrenAccessor)
37+
*/
38+
@Component({
39+
selector: 'tree-flat-child-accessor-overview-example',
40+
templateUrl: 'tree-flat-child-accessor-overview-example.html',
41+
standalone: true,
42+
imports: [MatTreeModule, MatButtonModule, MatIconModule],
43+
changeDetection: ChangeDetectionStrategy.OnPush,
44+
})
45+
export class TreeFlatChildAccessorOverviewExample {
46+
dataSource = TREE_DATA;
47+
48+
childrenAccessor = (node: FoodNode) => node.children ?? [];
49+
50+
hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
51+
}

‎src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.example-tree-invisible {
2+
display: none;
3+
}
4+
5+
.example-tree ul,
6+
.example-tree li {
7+
margin-top: 0;
8+
margin-bottom: 0;
9+
list-style-type: none;
10+
}
11+
12+
/*
13+
* This padding sets alignment of the nested nodes.
14+
*/
15+
.example-tree .mat-nested-tree-node div[role=group] {
16+
padding-left: 40px;
17+
}
18+
19+
/*
20+
* Padding for leaf nodes.
21+
* Leaf nodes need to have padding so as to align with other non-leaf nodes
22+
* under the same parent.
23+
*/
24+
.example-tree div[role=group] > .mat-tree-node {
25+
padding-left: 40px;
26+
}

‎src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<mat-tree #tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor" class="example-tree">
2+
<!-- This is the tree node template for leaf nodes -->
3+
<!-- There is inline padding applied to this node using styles.
4+
This padding value depends on the mat-icon-button width. -->
5+
<mat-tree-node *matTreeNodeDef="let node">
6+
{{node.name}}
7+
</mat-tree-node>
8+
<!-- This is the tree node template for expandable nodes -->
9+
<mat-nested-tree-node
10+
*matTreeNodeDef="let node; when: hasChild"
11+
matTreeNodeToggle [cdkTreeNodeTypeaheadLabel]="node.name">
12+
<div class="mat-tree-node">
13+
<button mat-icon-button matTreeNodeToggle
14+
[attr.aria-label]="'Toggle ' + node.name">
15+
<mat-icon class="mat-icon-rtl-mirror">
16+
{{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
17+
</mat-icon>
18+
</button>
19+
{{node.name}}
20+
</div>
21+
<!-- There is inline padding applied to this div using styles.
22+
This padding value depends on the mat-icon-button width. -->
23+
<div [class.example-tree-invisible]="!tree.isExpanded(node)"
24+
role="group">
25+
<ng-container matTreeNodeOutlet></ng-container>
26+
</div>
27+
</mat-nested-tree-node>
28+
</mat-tree>

‎src/components-examples/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {ChangeDetectionStrategy, Component} from '@angular/core';
2+
import {MatTreeModule} from '@angular/material/tree';
3+
import {MatIconModule} from '@angular/material/icon';
4+
import {MatButtonModule} from '@angular/material/button';
5+
6+
/**
7+
* Food data with nested structure.
8+
* Each node has a name and an optional list of children.
9+
*/
10+
interface FoodNode {
11+
name: string;
12+
children?: FoodNode[];
13+
}
14+
15+
const TREE_DATA: FoodNode[] = [
16+
{
17+
name: 'Fruit',
18+
children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}],
19+
},
20+
{
21+
name: 'Vegetables',
22+
children: [
23+
{
24+
name: 'Green',
25+
children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
26+
},
27+
{
28+
name: 'Orange',
29+
children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
30+
},
31+
],
32+
},
33+
];
34+
35+
/**
36+
* @title Tree with nested nodes (childrenAccessor)
37+
*/
38+
@Component({
39+
selector: 'tree-nested-child-accessor-overview-example',
40+
templateUrl: 'tree-nested-child-accessor-overview-example.html',
41+
styleUrl: 'tree-nested-child-accessor-overview-example.css',
42+
standalone: true,
43+
imports: [MatTreeModule, MatButtonModule, MatIconModule],
44+
changeDetection: ChangeDetectionStrategy.OnPush,
45+
})
46+
export class TreeNestedChildAccessorOverviewExample {
47+
childrenAccessor = (node: FoodNode) => node.children ?? [];
48+
49+
dataSource = TREE_DATA;
50+
51+
hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
52+
}

‎src/dev-app/tree/tree-demo.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
<mat-expansion-panel-header>Flat tree</mat-expansion-panel-header>
44
<tree-flat-overview-example></tree-flat-overview-example>
55
</mat-expansion-panel>
6+
<mat-expansion-panel>
7+
<mat-expansion-panel-header>Flat tree (childrenAccessor)</mat-expansion-panel-header>
8+
<tree-flat-child-accessor-overview-example></tree-flat-child-accessor-overview-example>
9+
</mat-expansion-panel>
610
<mat-expansion-panel>
711
<mat-expansion-panel-header>CDK Flat tree</mat-expansion-panel-header>
812
<cdk-tree-flat-example></cdk-tree-flat-example>
@@ -19,6 +23,10 @@
1923
<mat-expansion-panel-header>Nested tree</mat-expansion-panel-header>
2024
<tree-nested-overview-example></tree-nested-overview-example>
2125
</mat-expansion-panel>
26+
<mat-expansion-panel>
27+
<mat-expansion-panel-header>Nested tree (childrenAccessor)</mat-expansion-panel-header>
28+
<tree-nested-child-accessor-overview-example></tree-nested-child-accessor-overview-example>
29+
</mat-expansion-panel>
2230
<mat-expansion-panel>
2331
<mat-expansion-panel-header>CDK Nested tree</mat-expansion-panel-header>
2432
<cdk-tree-nested-example></cdk-tree-nested-example>

‎src/dev-app/tree/tree-demo.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import {
2424
TreeLegacyKeyboardInterfaceExample,
2525
TreeLoadmoreExample,
2626
TreeNestedOverviewExample,
27+
TreeNestedChildAccessorOverviewExample,
28+
TreeFlatChildAccessorOverviewExample,
2729
} from '@angular/components-examples/material/tree';
2830
import {ChangeDetectionStrategy, Component} from '@angular/core';
2931
import {FormsModule} from '@angular/forms';
@@ -54,10 +56,12 @@ import {MatTreeModule} from '@angular/material/tree';
5456
CommonModule,
5557
FormsModule,
5658
TreeDynamicExample,
59+
TreeFlatChildAccessorOverviewExample,
5760
TreeFlatOverviewExample,
5861
TreeHarnessExample,
5962
TreeLegacyKeyboardInterfaceExample,
6063
TreeLoadmoreExample,
64+
TreeNestedChildAccessorOverviewExample,
6165
TreeNestedOverviewExample,
6266
MatButtonModule,
6367
MatExpansionModule,

‎src/material/tree/tree.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ but instead are rendered as siblings in sequence.
2121
</mat-tree>
2222
```
2323

24-
<!-- example(tree-flat-overview) -->
24+
<!-- example(tree-flat-child-accessor-overview) -->
2525

2626
Flat trees are generally easier to style and inspect. They are also more friendly to scrolling
2727
variations, such as infinite or virtual scrolling.
@@ -41,7 +41,7 @@ contains a node outlet into which children are projected.
4141
</mat-tree>
4242
```
4343

44-
<!-- example(tree-nested-overview) -->
44+
<!-- example(tree-nested-child-accessor-overview) -->
4545

4646
Nested trees are easier to work with when hierarchical relationships are visually represented in
4747
ways that would be difficult to accomplish with flat nodes.

0 commit comments

Comments
 (0)