DaffTreeItemDirective

The DaffTreeItemDirective marks elements as tree child nodes that interact with the parent tree structure.

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

@Directive()
class DaffTreeItemDirective {
  @HostBinding() depth: number
  @HostBinding() 
  get selectedClass()
  @HostBinding() openClass: false
  @Input() 
  get node(): DaffTreeFlatNode
  set node(value): DaffTreeFlatNode
  @Input() selected: false
  toggleParent(node: DaffTreeFlatNode)
  toggleTree(node: DaffTreeFlatNode)
}

Properties

Name	Type	Description
depth	number	A css variable indicating the depth of the tree. You can use this to style your templates if you want to use different designs at different depths.
selectedClass		The CSS class indicating whether or not the tree is selected.
openClass	false	The CSS class indicating whether or not the tree is open.
@Input() node	DaffTreeFlatNode	The DaffTreeFlatNode associated with this specific tree item.
@Input() selected	false	Whether or not the tree item is the currently active item. Note that there is no requirement there there only be one active item at a time.
toggleParent		Toggle the open state of the tree's parent.
toggleTree		Toggle the open state of this specific subtree tree.

[tree] is a {@link DaffTreeData} and [daff-tree] is a {@link DaffTreeComponent}.

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