Skip to content

fix(schematics): tree schematic not working #12281

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.

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
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,18 @@ import { of as observableOf } from 'rxjs';
import { FlatTreeControl } from '@angular/cdk/tree';
import { files } from './example-data';

/** File node data with nested structure. */
/** File node data with possible child nodes. */
export interface FileNode {
name: string;
type: string;
children?: FileNode[];
}

/** Flat node with expandable and level information */
export interface TreeNode {
/**
* Flattened tree node that has been created from a FileNode through the flattener. Flattened
* nodes include level index and whether they can be expanded or not.
*/
export interface FlatTreeNode {
name: string;
type: string;
level: number;
Expand All @@ -37,22 +40,22 @@ export interface TreeNode {
export class <%= classify(name) %>Component {

/** The TreeControl controls the expand/collapse state of tree nodes. */
treeControl: FlatTreeControl<TreeNode>;
treeControl: FlatTreeControl<FlatTreeNode>;

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

/** The MatTreeFlatDataSource connects the control and flattener to provide data. */
dataSource: MatTreeFlatDataSource<FileNode, TreeNode>;
dataSource: MatTreeFlatDataSource<FileNode, FlatTreeNode>;

constructor() {
this.treeFlattener = new MatTreeFlattener(
this.transformer,
this.getLevel,
this.isExpandable,
this.getChildren);
this.treeControl = new FlatTreeControl<TreeNode>(this.getLevel, this.isExpandable);

this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
this.dataSource.data = files;
}
Expand All @@ -67,23 +70,23 @@ export class <%= classify(name) %>Component {
};
}

/** Get the level of the node */
getLevel(node: TreeNode) {
/** Get the level of the node */
getLevel(node: FlatTreeNode) {
return node.level;
}

/** Get whether the node is expanded or not. */
isExpandable(node: TreeNode) {
isExpandable(node: FlatTreeNode) {
return node.expandable;
};

/** Get whether the node has children or not. */
hasChild(index: number, node: FlatTreeNode) {
return node.expandable;
}

/** Get the children for the node. */
getChildren(node: FileNode) {
return observableOf(node.children);
}

/** Get whether the node has children or not. */
hasChild(index: number, node: TreeNode){
return node.expandable;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const files = [
children: [
{
name: 'cdk',
type: 'folder',
children: [
{ name: 'package.json', type: 'file' },
{ name: 'BUILD.bazel', type: 'file' },
Expand Down