DaffTreeComponent

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.

Selector: 'ul[daff-tree]'

Properties

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