DaffTreeComponent

import { DaffTreeComponent } from '@daffodil/design/tree'

The DaffTreeComponent allows you to render tree structures as interactable ui.

@Component()
class DaffTreeComponent implements OnInit, OnChanges {
  flatTree: DaffTreeFlatNode[] = []

  @Input() renderMode: DaffTreeRenderMode
  @Input() tree: DaffTreeData<unknown>

  ngOnChanges(changes: SimpleChanges): void
  trackByTreeElement(
    index: number
    el: any
  ): any
}

Properties

flatTree

DaffTreeFlatNode[]

Default	`[]`
Description	The flattened tree data. You can iterate through this if you want to inspect the resulting array structure we computed to render the tree.

() Methods

Parameters

Parameter	`changes: SimpleChanges`
Description

Parameters

Parameter	`index: number`
Description

Parameter	`el: any`
Description

Inputs

renderMode

DaffTreeRenderMode

Default –

Description

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.

tree

DaffTreeData

Default	–
Description	The tree data you would like to render.

Examples

Basic use of the tree component

<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 {@link DaffTreeData}.