This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.
npm install cdk-virtual-treeThis library was generated with Angular CLI version 16.0.0.
``
npm i virtual-tree
Import Module
`
imports: [CommonModule, VirtualTreeModule, ...],
Create Component
`
interface FoodNode {
name: string;
children?: FoodNode[];
}
const TREE_DATA: FoodNode[] = [
{
name: 'Fruit',
children: [{ name: 'Apple' }, { name: 'Banana' }, { name: 'Fruit loops' }],
},
{
name: 'Vegetables',
children: [
{
name: 'Green',
children: [{ name: 'Broccoli' }, { name: 'Brussels sprouts' }],
},
{
name: 'Orange',
children: [{ name: 'Pumpkins' }, { name: 'Carrots' }],
},
],
},
];
/* Flat node with expandable and level information /
interface ExampleFlatNode {
expandable: boolean;
name: string;
level: number;
}
export class MyComponent {
private _transformer = (node: FoodNode, level: number) => {
return {
expandable: !!node.children && node.children.length > 0,
name: node.name,
level: level,
};
};
treeControl = new FlatTreeControl
(node) => node.level,
(node) => node.expandable,
);
treeFlattener = new MatTreeFlattener(
this._transformer,
(node) => node.level,
(node) => node.expandable,
(node) => node.children,
);
dataSource = new VirtualTreeDataSource(this.treeControl, this.treeFlattener);
constructor() {
this.dataSource.data = TREE_DATA;
}
hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
}
`
This is a extension of Angular Material Tree example. The main difference is, that now we use the VirtualTreeDataSource.
In the template use the virtual-tree component as followed:
`
{{ node.name }} : {{ node.level }}
{{ node.name }}
``