import { DaffTreeItemDirective } from '@daffodil/design/tree'
The DaffTreeItemDirective marks elements as tree child nodes that interact with the parent tree structure.
@Directive()
class DaffTreeItemDirective {
@Input() node: DaffTreeFlatNode
@Input() selected: boolean = false
toggleParent(node: DaffTreeFlatNode): void
toggleTree(node: DaffTreeFlatNode): void
}
DaffTreeFlatNode| Default | – |
|---|---|
| Description | The DaffTreeFlatNode associated with this specific tree item. |
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. |
voidToggle the open state of the tree's parent.
| Parameter | node: DaffTreeFlatNode |
|---|---|
| Description |
voidToggle the open state of this specific subtree tree.
| Parameter | node: DaffTreeFlatNode |
|---|---|
| Description |
[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>
[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>