Skip to content

doc(tree):simplify tree example #14718

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
Jan 25, 2019
Merged

doc(tree):simplify tree example #14718

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
3 changes: 2 additions & 1 deletion src/dev-app/tree/tree-demo-module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {ChecklistTreeDemo} from './checklist-tree-demo/checklist-tree-demo';
import {ChecklistNestedTreeDemo} from './checklist-tree-demo/checklist-nested-tree-demo';
import {DynamicTreeDemo} from './dynamic-tree-demo/dynamic-tree-demo';
import {LoadmoreTreeDemo} from './loadmore-tree-demo/loadmore-tree-demo';

import {ExamplePageModule} from '../example/example-module';

@NgModule({
imports: [
Expand All @@ -39,6 +39,7 @@ import {LoadmoreTreeDemo} from './loadmore-tree-demo/loadmore-tree-demo';
MatInputModule,
MatTreeModule,
MatProgressBarModule,
ExamplePageModule,
],
declarations: [
ChecklistNestedTreeDemo,
Expand Down
90 changes: 8 additions & 82 deletions src/dev-app/tree/tree-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,19 @@
<mat-accordion class="demo-tree-container">

<mat-expansion-panel>
<mat-expansion-panel-header>Flattened tree</mat-expansion-panel-header>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
<button mat-icon-button disabled></button>
{{node.filename}} : {{node.type}}
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.filename">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.filename}} : {{node.type}}
</mat-tree-node>
</mat-tree>
<mat-expansion-panel-header>Flat tree</mat-expansion-panel-header>
<material-example id="tree-flat-overview"></material-example>
</mat-expansion-panel>

<mat-expansion-panel>
<mat-expansion-panel-header>Nested tree</mat-expansion-panel-header>
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
<mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<button mat-icon-button disabled></button>
{{node.filename}}: {{node.type}}
</li>
</mat-nested-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
<li>
<div class="mat-tree-node">
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.filename">
<mat-icon class="mat-icon-rtl-mirror">
{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.filename}}
</div>
<ul [class.demo-tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
<mat-expansion-panel-header>CDK Flat tree</mat-expansion-panel-header>
<material-example id="cdk-tree-flat"></material-example>
</mat-expansion-panel>

<mat-expansion-panel>
<mat-expansion-panel-header>CDK Flattened tree</mat-expansion-panel-header>
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="demo-tree-node">
<button mat-icon-button disabled></button>
{{node.filename}}: {{node.type}}
</cdk-tree-node>
<cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
class="demo-tree-node">
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
cdkTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.filename}}: {{node.type}}
</cdk-tree-node>
</cdk-tree>
<mat-expansion-panel-header>Nested tree</mat-expansion-panel-header>
<material-example id="tree-nested-overview"></material-example>
</mat-expansion-panel>

<mat-expansion-panel>
<mat-expansion-panel-header>CDK Nested tree</mat-expansion-panel-header>
<cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
<cdk-nested-tree-node *cdkTreeNodeDef="let node" class="demo-tree-node">
<button mat-icon-button disabled></button>
{{node.filename}}: {{node.type}}
</cdk-nested-tree-node>
<cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="demo-tree-node">
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
cdkTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.filename}}: {{node.type}}
<div [class.demo-tree-invisible]="!nestedTreeControl.isExpanded(node)"
class="demo-tree-nested-node">
<ng-container cdkTreeNodeOutlet></ng-container>
</div>
</cdk-nested-tree-node>
</cdk-tree>
<material-example id="cdk-tree-nested"></material-example>
</mat-expansion-panel>

<mat-expansion-panel>
Expand All @@ -106,7 +32,7 @@
</mat-expansion-panel>

<mat-expansion-panel>
<mat-expansion-panel-header>Loadmore flat tree</mat-expansion-panel-header>
<mat-expansion-panel-header>Load more flat tree</mat-expansion-panel-header>
<loadmore-tree-demo></loadmore-tree-demo>
</mat-expansion-panel>

Expand Down
62 changes: 1 addition & 61 deletions src/dev-app/tree/tree-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,72 +5,12 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/

import {FlatTreeControl, NestedTreeControl} from '@angular/cdk/tree';
import {Component} from '@angular/core';
import {
MatTreeFlatDataSource,
MatTreeFlattener,
MatTreeNestedDataSource
} from '@angular/material/tree';
import {FileDatabase, FileFlatNode, FileNode} from './file-database';


@Component({
moduleId: module.id,
selector: 'tree-demo',
templateUrl: 'tree-demo.html',
styleUrls: ['tree-demo.css'],
providers: [FileDatabase]
})
export class TreeDemo {
// Flat tree control
treeControl: FlatTreeControl<FileFlatNode>;

// Nested tree control
nestedTreeControl: NestedTreeControl<FileNode>;

treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;

// Flat tree data source
dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;

// Nested tree data source
nestedDataSource: MatTreeNestedDataSource<FileNode>;

constructor(database: FileDatabase) {
this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
this.isExpandable, this.getChildren);
// For flat tree
this.treeControl = new FlatTreeControl<FileFlatNode>(this.getLevel, this.isExpandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

// For nested tree
this.nestedTreeControl = new NestedTreeControl<FileNode>(this.getChildren);
this.nestedDataSource = new MatTreeNestedDataSource();

database.dataChange.subscribe(data => {
this.dataSource.data = data;
this.nestedDataSource.data = data;
});
}

transformer = (node: FileNode, level: number) => {
const flatNode = new FileFlatNode();
flatNode.filename = node.filename;
flatNode.type = node.type;
flatNode.level = level;
flatNode.expandable = !!node.children;
return flatNode;
}

getLevel = (node: FileFlatNode) => { return node.level; };

isExpandable = (node: FileFlatNode) => { return node.expandable; };

getChildren = (node: FileNode): FileNode[] => { return node.children; };

hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };

hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
}
export class TreeDemo {}
20 changes: 15 additions & 5 deletions src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,24 @@
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="example-tree-node">
<!-- This is the tree node template for leaf nodes -->
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
[style.display]="shouldRender(node) ? 'flex' : 'none'"
class="example-tree-node">
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
{{node.filename}}: {{node.type}}
{{node.name}}
</cdk-tree-node>
<cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding class="example-tree-node">
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
<!-- This is the tree node template for expandable nodes -->
<cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
[style.display]="shouldRender(node) ? 'flex' : 'none'"
class="example-tree-node">
<button mat-icon-button cdkTreeNodeToggle
[attr.aria-label]="'toggle ' + node.filename"
(click)="node.isExpanded = !node.isExpanded"
[style.visibility]="node.expandable ? 'visible' : 'hidden'">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.filename}}: {{node.type}}
{{node.name}}
</cdk-tree-node>
</cdk-tree>
Loading