Skip to content

Commit dc435f7

Browse files
vivian-hu-zzandrewseguin
vivian-hu-zz
authored and
andrewseguin
committed
doc(tree):simplify tree example (#14718)
1 parent 5aefe60 commit dc435f7

File tree

12 files changed

+254
-635
lines changed

12 files changed

+254
-635
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {ChecklistTreeDemo} from './checklist-tree-demo/checklist-tree-demo';
2424
import {ChecklistNestedTreeDemo} from './checklist-tree-demo/checklist-nested-tree-demo';
2525
import {DynamicTreeDemo} from './dynamic-tree-demo/dynamic-tree-demo';
2626
import {LoadmoreTreeDemo} from './loadmore-tree-demo/loadmore-tree-demo';
27-
27+
import {ExamplePageModule} from '../example/example-module';
2828

2929
@NgModule({
3030
imports: [
@@ -39,6 +39,7 @@ import {LoadmoreTreeDemo} from './loadmore-tree-demo/loadmore-tree-demo';
3939
MatInputModule,
4040
MatTreeModule,
4141
MatProgressBarModule,
42+
ExamplePageModule,
4243
],
4344
declarations: [
4445
ChecklistNestedTreeDemo,

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

Lines changed: 8 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,19 @@
11
<mat-accordion class="demo-tree-container">
2-
32
<mat-expansion-panel>
4-
<mat-expansion-panel-header>Flattened tree</mat-expansion-panel-header>
5-
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
6-
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
7-
<button mat-icon-button disabled></button>
8-
{{node.filename}} : {{node.type}}
9-
</mat-tree-node>
10-
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
11-
<button mat-icon-button matTreeNodeToggle
12-
[attr.aria-label]="'toggle ' + node.filename">
13-
<mat-icon class="mat-icon-rtl-mirror">
14-
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
15-
</mat-icon>
16-
</button>
17-
{{node.filename}} : {{node.type}}
18-
</mat-tree-node>
19-
</mat-tree>
3+
<mat-expansion-panel-header>Flat tree</mat-expansion-panel-header>
4+
<material-example id="tree-flat-overview"></material-example>
205
</mat-expansion-panel>
21-
226
<mat-expansion-panel>
23-
<mat-expansion-panel-header>Nested tree</mat-expansion-panel-header>
24-
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
25-
<mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
26-
<li class="mat-tree-node">
27-
<button mat-icon-button disabled></button>
28-
{{node.filename}}: {{node.type}}
29-
</li>
30-
</mat-nested-tree-node>
31-
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
32-
<li>
33-
<div class="mat-tree-node">
34-
<button mat-icon-button matTreeNodeToggle
35-
[attr.aria-label]="'toggle ' + node.filename">
36-
<mat-icon class="mat-icon-rtl-mirror">
37-
{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
38-
</mat-icon>
39-
</button>
40-
{{node.filename}}
41-
</div>
42-
<ul [class.demo-tree-invisible]="!nestedTreeControl.isExpanded(node)">
43-
<ng-container matTreeNodeOutlet></ng-container>
44-
</ul>
45-
</li>
46-
</mat-nested-tree-node>
47-
</mat-tree>
7+
<mat-expansion-panel-header>CDK Flat tree</mat-expansion-panel-header>
8+
<material-example id="cdk-tree-flat"></material-example>
489
</mat-expansion-panel>
49-
5010
<mat-expansion-panel>
51-
<mat-expansion-panel-header>CDK Flattened tree</mat-expansion-panel-header>
52-
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
53-
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="demo-tree-node">
54-
<button mat-icon-button disabled></button>
55-
{{node.filename}}: {{node.type}}
56-
</cdk-tree-node>
57-
<cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
58-
class="demo-tree-node">
59-
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
60-
cdkTreeNodeToggle>
61-
<mat-icon class="mat-icon-rtl-mirror">
62-
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
63-
</mat-icon>
64-
</button>
65-
{{node.filename}}: {{node.type}}
66-
</cdk-tree-node>
67-
</cdk-tree>
11+
<mat-expansion-panel-header>Nested tree</mat-expansion-panel-header>
12+
<material-example id="tree-nested-overview"></material-example>
6813
</mat-expansion-panel>
69-
7014
<mat-expansion-panel>
7115
<mat-expansion-panel-header>CDK Nested tree</mat-expansion-panel-header>
72-
<cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
73-
<cdk-nested-tree-node *cdkTreeNodeDef="let node" class="demo-tree-node">
74-
<button mat-icon-button disabled></button>
75-
{{node.filename}}: {{node.type}}
76-
</cdk-nested-tree-node>
77-
<cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="demo-tree-node">
78-
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
79-
cdkTreeNodeToggle>
80-
<mat-icon class="mat-icon-rtl-mirror">
81-
{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
82-
</mat-icon>
83-
</button>
84-
{{node.filename}}: {{node.type}}
85-
<div [class.demo-tree-invisible]="!nestedTreeControl.isExpanded(node)"
86-
class="demo-tree-nested-node">
87-
<ng-container cdkTreeNodeOutlet></ng-container>
88-
</div>
89-
</cdk-nested-tree-node>
90-
</cdk-tree>
16+
<material-example id="cdk-tree-nested"></material-example>
9117
</mat-expansion-panel>
9218

9319
<mat-expansion-panel>
@@ -106,7 +32,7 @@
10632
</mat-expansion-panel>
10733

10834
<mat-expansion-panel>
109-
<mat-expansion-panel-header>Loadmore flat tree</mat-expansion-panel-header>
35+
<mat-expansion-panel-header>Load more flat tree</mat-expansion-panel-header>
11036
<loadmore-tree-demo></loadmore-tree-demo>
11137
</mat-expansion-panel>
11238

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

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -5,72 +5,12 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.io/license
77
*/
8-
9-
import {FlatTreeControl, NestedTreeControl} from '@angular/cdk/tree';
108
import {Component} from '@angular/core';
11-
import {
12-
MatTreeFlatDataSource,
13-
MatTreeFlattener,
14-
MatTreeNestedDataSource
15-
} from '@angular/material/tree';
16-
import {FileDatabase, FileFlatNode, FileNode} from './file-database';
17-
189

1910
@Component({
2011
moduleId: module.id,
2112
selector: 'tree-demo',
2213
templateUrl: 'tree-demo.html',
2314
styleUrls: ['tree-demo.css'],
24-
providers: [FileDatabase]
2515
})
26-
export class TreeDemo {
27-
// Flat tree control
28-
treeControl: FlatTreeControl<FileFlatNode>;
29-
30-
// Nested tree control
31-
nestedTreeControl: NestedTreeControl<FileNode>;
32-
33-
treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
34-
35-
// Flat tree data source
36-
dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
37-
38-
// Nested tree data source
39-
nestedDataSource: MatTreeNestedDataSource<FileNode>;
40-
41-
constructor(database: FileDatabase) {
42-
this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
43-
this.isExpandable, this.getChildren);
44-
// For flat tree
45-
this.treeControl = new FlatTreeControl<FileFlatNode>(this.getLevel, this.isExpandable);
46-
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
47-
48-
// For nested tree
49-
this.nestedTreeControl = new NestedTreeControl<FileNode>(this.getChildren);
50-
this.nestedDataSource = new MatTreeNestedDataSource();
51-
52-
database.dataChange.subscribe(data => {
53-
this.dataSource.data = data;
54-
this.nestedDataSource.data = data;
55-
});
56-
}
57-
58-
transformer = (node: FileNode, level: number) => {
59-
const flatNode = new FileFlatNode();
60-
flatNode.filename = node.filename;
61-
flatNode.type = node.type;
62-
flatNode.level = level;
63-
flatNode.expandable = !!node.children;
64-
return flatNode;
65-
}
66-
67-
getLevel = (node: FileFlatNode) => { return node.level; };
68-
69-
isExpandable = (node: FileFlatNode) => { return node.expandable; };
70-
71-
getChildren = (node: FileNode): FileNode[] => { return node.children; };
72-
73-
hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
74-
75-
hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
76-
}
16+
export class TreeDemo {}

‎src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
2-
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="example-tree-node">
2+
<!-- This is the tree node template for leaf nodes -->
3+
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
4+
[style.display]="shouldRender(node) ? 'flex' : 'none'"
5+
class="example-tree-node">
6+
<!-- use a disabled button to provide padding for tree leaf -->
37
<button mat-icon-button disabled></button>
4-
{{node.filename}}: {{node.type}}
8+
{{node.name}}
59
</cdk-tree-node>
6-
<cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding class="example-tree-node">
7-
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
10+
<!-- This is the tree node template for expandable nodes -->
11+
<cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
12+
[style.display]="shouldRender(node) ? 'flex' : 'none'"
13+
class="example-tree-node">
14+
<button mat-icon-button cdkTreeNodeToggle
15+
[attr.aria-label]="'toggle ' + node.filename"
16+
(click)="node.isExpanded = !node.isExpanded"
17+
[style.visibility]="node.expandable ? 'visible' : 'hidden'">
818
<mat-icon class="mat-icon-rtl-mirror">
919
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
1020
</mat-icon>
1121
</button>
12-
{{node.filename}}: {{node.type}}
22+
{{node.name}}
1323
</cdk-tree-node>
1424
</cdk-tree>

0 commit comments

Comments
 (0)