Skip to content

Commit ca7a82b

Browse files
BobobUnicornBobobUnicorn
committed
main - c4ca044 docs(material/tree): update examples on docs pages, add new childrenAccessor examples (#29752)
1 parent 974dde6 commit ca7a82b

20 files changed

+521
-22
lines changed

‎docs-content/examples-highlighted/material/tree/index-ts.html‎

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

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<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>
2+
<span class="hljs-comment">&lt;!-- This is the tree node template for leaf nodes --&gt;</span>
3+
<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>
4+
<span class="hljs-comment">&lt;!-- use a disabled button to provide padding for tree leaf --&gt;</span>
5+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
6+
{{node.name}}
7+
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree-node</span>&gt;</span>
8+
<span class="hljs-comment">&lt;!-- This is the tree node template for expandable nodes --&gt;</span>
9+
<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>
10+
[<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.name&quot;</span>&gt;</span>
11+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> <span class="hljs-attr">matTreeNodeToggle</span>
12+
[<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span>&gt;</span>
13+
<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>
14+
{{tree.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
15+
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
16+
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
17+
{{node.name}}
18+
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree-node</span>&gt;</span>
19+
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tree</span>&gt;</span>

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

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

‎docs-content/examples-highlighted/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example-css.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<span class="hljs-selector-class">.example-tree-invisible</span> {
2+
<span class="hljs-attribute">display</span>: none;
3+
}
4+
5+
<span class="hljs-selector-class">.example-tree</span> <span class="hljs-selector-tag">ul</span>,
6+
<span class="hljs-selector-class">.example-tree</span> <span class="hljs-selector-tag">li</span> {
7+
<span class="hljs-attribute">margin-top</span>: <span class="hljs-number">0</span>;
8+
<span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">0</span>;
9+
<span class="hljs-attribute">list-style-type</span>: none;
10+
}
11+
12+
<span class="hljs-comment">/*
13+
* This padding sets alignment of the nested nodes.
14+
*/</span>
15+
<span class="hljs-selector-class">.example-tree</span> <span class="hljs-selector-class">.mat-nested-tree-node</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-attr">[role=group]</span> {
16+
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">40px</span>;
17+
}
18+
19+
<span class="hljs-comment">/*
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+
*/</span>
24+
<span class="hljs-selector-class">.example-tree</span> <span class="hljs-selector-tag">div</span><span class="hljs-selector-attr">[role=group]</span> &gt; <span class="hljs-selector-class">.mat-tree-node</span> {
25+
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">40px</span>;
26+
}

‎docs-content/examples-highlighted/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example-html.html‎

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

‎docs-content/examples-highlighted/material/tree/tree-nested-child-accessor-overview/tree-nested-child-accessor-overview-example-ts.html‎

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

‎docs-content/examples-source/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';

‎docs-content/examples-source/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>

‎docs-content/examples-source/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+
}

0 commit comments

Comments
 (0)