DaffTreeItemDirective

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

Selector: '[daffTreeItem]'

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>