Custom Templates

You can customize the tree's templates using embedded template tags

#treeNodeTemplate

Use #treeNodeTemplate for the content of the node.
You will have access to the following variables:
node: of type TreeNode. Exposes many useful methods, as well as a data attribute with the original node's data.
index: The index of the current node in the parent's children.

For example:

HTML

<tree-root [nodes]="nodes">
  <template #treeNodeTemplate let-node="node" let-index="index">
	  <span>{{ node.data.name }}</span>
	  <button (click)="go($event)">Custom Action</button>
  </template>
</tree-root>

#loadingTemplate

For asynchronous data loading, use #loadingTemplate to customize the message that appears while loading the children.

For example:

Text

<tree-root [nodes]="nodes">
  <template #loadingTemplate>Loading, please hold....</template>
</tree-root>

#treeNodeFullTemplate

This option is useful in case all other customisation options are not suitable for you.
It allows for full customisation of the node, as it replaces the internal template for the TreeNode component.

Start by specifying the following template, and make sure the tree still renders as expected.
Then remove / change whatever you need:

HTML

<template #treeNodeFullTemplate
          let-node="node"
          let-index="index"
          let-templates="templates">
  <div
       class="tree-node tree-node-level-{{ node.level }}"
       [class]="node.getClass()"
       [class.tree-node-expanded]="node.isExpanded && node.hasChildren"
       [class.tree-node-collapsed]="node.isCollapsed && node.hasChildren"
       [class.tree-node-leaf]="node.isLeaf"
       [class.tree-node-active]="node.isActive"
       [class.tree-node-focused]="node.isFocused">

    <tree-node-drop-slot
                         *ngIf="index === 0"
                         [dropIndex]="node.index"
                         [node]="node.parent">
    </tree-node-drop-slot>

    <div class="node-wrapper" [style.padding-left]="node.getNodePadding()">
      <tree-node-expander [node]="node"></tree-node-expander>
      <div class="node-content-wrapper"
           (click)="node.mouseAction('click', $event)"
           (dblclick)="node.mouseAction('dblClick', $event)"
           (contextmenu)="node.mouseAction('contextMenu', $event)"
           (treeDrop)="node.onDrop($event)"
           [treeAllowDrop]="node.allowDrop"
           [treeDrag]="node"
           [treeDragEnabled]="node.allowDrag()">

        <tree-node-content
                           [node]="node"
                           [index]="index"
                           [template]="templates.treeNodeTemplate">
        </tree-node-content>
      </div>
    </div>

    <tree-node-children [node]="node" [templates]="templates">
    </tree-node-children>
    <tree-node-drop-slot [dropIndex]="node.index + 1" [node]="node.parent">
    </tree-node-drop-slot>
  </div>
</template>

📘

Note!

Do not remove let-templates="templates" and passing [templates]="templates" to tree-node-children. If you do that, the children of your nodes will not receive the custom template you provided.

Demo

Source code for this demo