Skip to content

Commit 45e067f

Browse files
committed
fix(schematics): tree schematic not working
* Fixes that the new `tree` schematic is not working when added to an Angular app. Since one `FileNode` does not have the required `type` property, the TS compiler will complain about wrongly assigning the example data to the `DataSource`.
1 parent f35a314 commit 45e067f

File tree

2 files changed

+20
-16
lines changed

2 files changed

+20
-16
lines changed

src/lib/schematics/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@ import { of as observableOf } from 'rxjs';
44
import { FlatTreeControl } from '@angular/cdk/tree';
55
import { files } from './example-data';
66

7-
/** File node data with nested structure. */
7+
/** File node data with possible child nodes. */
88
export interface FileNode {
99
name: string;
1010
type: string;
1111
children?: FileNode[];
1212
}
1313

14-
/** Flat node with expandable and level information */
15-
export interface TreeNode {
14+
/**
15+
* Flattened tree node that has been created from a FileNode through the flattener. Flattened
16+
* nodes include level index and whether they can be expanded or not.
17+
*/
18+
export interface FlatTreeNode {
1619
name: string;
1720
type: string;
1821
level: number;
@@ -61,22 +64,22 @@ export interface TreeNode {
6164
export class <%= classify(name) %>Component {
6265

6366
/** The TreeControl controls the expand/collapse state of tree nodes. */
64-
treeControl: FlatTreeControl<TreeNode>;
67+
treeControl: FlatTreeControl<FlatTreeNode>;
6568

6669
/** The TreeFlattener is used to generate the flat list of items from hierarchical data. */
67-
treeFlattener: MatTreeFlattener<FileNode, TreeNode>;
70+
treeFlattener: MatTreeFlattener<FileNode, FlatTreeNode>;
6871

6972
/** The MatTreeFlatDataSource connects the control and flattener to provide data. */
70-
dataSource: MatTreeFlatDataSource<FileNode, TreeNode>;
73+
dataSource: MatTreeFlatDataSource<FileNode, FlatTreeNode>;
7174

7275
constructor() {
7376
this.treeFlattener = new MatTreeFlattener(
7477
this.transformer,
7578
this.getLevel,
7679
this.isExpandable,
7780
this.getChildren);
78-
79-
this.treeControl = new FlatTreeControl<TreeNode>(this.getLevel, this.isExpandable);
81+
82+
this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
8083
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
8184
this.dataSource.data = files;
8285
}
@@ -91,23 +94,23 @@ export class <%= classify(name) %>Component {
9194
};
9295
}
9396

94-
/** Get the level of the node */
95-
getLevel(node: TreeNode) {
97+
/** Get the level of the node */
98+
getLevel(node: FlatTreeNode) {
9699
return node.level;
97100
}
98101

99102
/** Get whether the node is expanded or not. */
100-
isExpandable(node: TreeNode) {
103+
isExpandable(node: FlatTreeNode) {
101104
return node.expandable;
102105
};
103106

107+
/** Get whether the node has children or not. */
108+
hasChild(index: number, node: FlatTreeNode){
109+
return node.expandable;
110+
}
111+
104112
/** Get the children for the node. */
105113
getChildren(node: FileNode) {
106114
return observableOf(node.children);
107115
}
108-
109-
/** Get whether the node has children or not. */
110-
hasChild(index: number, node: TreeNode){
111-
return node.expandable;
112-
}
113116
}

src/lib/schematics/tree/files/__path__/__name@dasherize@if-flat__/example-data.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const files = [
1010
children: [
1111
{
1212
name: 'cdk',
13+
type: 'folder',
1314
children: [
1415
{ name: 'package.json', type: 'file' },
1516
{ name: 'BUILD.bazel', type: 'file' },

0 commit comments

Comments
 (0)