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.
Graycore, LLC © 2018 - 2024. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.