DaffTreeComponent

class

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

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

@Component()
class DaffTreeComponent implements OnInit, OnChanges {
  @Input() renderMode: DaffTreeRenderMode
  @Input() tree: DaffTreeData<unknown>
}

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}.

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}.