DaffTreeItemDirective

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

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

@Directive()
class DaffTreeItemDirective {
  @HostBinding() depth: number
  @HostBinding() 
  get selectedClass(): boolean
  @HostBinding() openClass: boolean = false

  @Input() node: DaffTreeFlatNode
  @Input() selected: boolean = false

  toggleParent(node: DaffTreeFlatNode): void
  toggleTree(node: DaffTreeFlatNode): void
}

Properties

depth

number

Default	–
Description	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

boolean

Default	–
Description	The CSS class indicating whether or not the tree is `selected`.

openClass

boolean

Default	`false`
Description	The CSS class indicating whether or not the tree is `open`.

() Methods

Parameters

Parameter	`node: DaffTreeFlatNode`
Description

Parameters

Parameter	`node: DaffTreeFlatNode`
Description

Inputs

node

DaffTreeFlatNode

Default	–
Description	The DaffTreeFlatNode associated with this specific tree item.

selected

boolean

Default	`false`
Description	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.

Examples

Using a `[daffTreeItem]`

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