DaffTreeItemDirective

The DaffTreeItemDirective allows you to demarcate the elements which are tree-children that interact with the parent tree.

They can be used like:

<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 DaffTreeData and daff-tree is a DaffTreeComponent.

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.