The DaffTreeComponent allows you to render tree structures as interactable ui.
They can be used like:
<ul daff-tree [tree]="tree">
<ng-template #daffTreeItemWithChildrenTpl let-node>
<button daffTreeItem [node]="node">{{ node.title }} </button>
</ng-template>
<ng-template #daffTreeItemTpl let-node>
<a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
</ng-template>
</ul>
where tree is a DaffTreeData.
'ul[daff-tree]'
| Name | Type | Description | |||
|---|---|---|---|---|---|
| @Input() renderMode | DaffTreeRenderMode |
The rendering mode for nodes in the tree. Default value is 'in-dom', which means nodes are present in the DOM. Generally, `not-in-dom` is faster as there are less DOM elements to render, but there may be use-cases (like SEO) where having the tree in the DOM is relevant. | flatTree | DaffTreeFlatNode[] | The flattened tree data. You can iterate through this if you want to inspect the resulting array structure we computed to render the tree. |
| @Input() tree | DaffTreeData<unknown> |
The tree data you would like to render. | ngOnChanges | void | |
| trackByTreeElement | any | The track-by function used to reduce tree-item re-renders |