| import { Component<% if (!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if (changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; |
| import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; |
| import { of as observableOf } from 'rxjs'; |
| import { FlatTreeControl } from '@angular/cdk/tree'; |
| import { files } from './example-data'; |
| |
| /** File node data with possible child nodes. */ |
| export interface FileNode { |
| name: string; |
| type: string; |
| children?: FileNode[]; |
| } |
| |
| /** |
| * 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; |
| expandable: boolean; |
| } |
| |
| @Component({ |
| selector: '<%= selector %>',<% if (inlineTemplate) { %> |
| template: ` |
| <%= indentTextContent(resolvedFiles.template, 4) %> |
| `,<% } else { %> |
| templateUrl: './<%= dasherize(name) %>.component.html',<% } if (inlineStyle) { %> |
| styles: [` |
| <%= indentTextContent(resolvedFiles.stylesheet, 4) %> |
| `]<% } else { %> |
| styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>, |
| encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>, |
| changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %> |
| }) |
| export class <%= classify(name) %>Component { |
| |
| /** The TreeControl controls the expand/collapse state of tree nodes. */ |
| treeControl: FlatTreeControl<FlatTreeNode>; |
| |
| /** The TreeFlattener is used to generate the flat list of items from hierarchical data. */ |
| treeFlattener: MatTreeFlattener<FileNode, FlatTreeNode>; |
| |
| /** The MatTreeFlatDataSource connects the control and flattener to provide data. */ |
| dataSource: MatTreeFlatDataSource<FileNode, FlatTreeNode>; |
| |
| constructor() { |
| this.treeFlattener = new MatTreeFlattener( |
| this.transformer, |
| this.getLevel, |
| this.isExpandable, |
| this.getChildren); |
| |
| this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable); |
| this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
| this.dataSource.data = files; |
| } |
| |
| /** Transform the data to something the tree can read. */ |
| transformer(node: FileNode, level: number) { |
| return { |
| name: node.name, |
| type: node.type, |
| level: level, |
| expandable: !!node.children |
| }; |
| } |
| |
| /** Get the level of the node */ |
| getLevel(node: FlatTreeNode) { |
| return node.level; |
| } |
| |
| /** Get whether the node is expanded or not. */ |
| 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); |
| } |
| } |