Custom Templates

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

Demo

Source code for this demo

📘

Note: Angular 2 vs. 4

In Angular 2 you should use <template> tag, whereas in Angular 4 it's <ng-template>

#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">
  <ng-template #treeNodeTemplate let-node let-index="index">
	  <span>{{ node.data.name }}</span>
	  <button (click)="go($event)">Custom Action</button>
  </ng-template>
</tree-root>

#treeNodeWrapperTemplate

This option is useful in case all you need to further customise the expander location and the node's event listeners.

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

HTML

<tree-root [nodes]="nodes">
  <ng-template #treeNodeWrapperTemplate let-node let-index="index">
    <div class="node-wrapper" [style.padding-left]="node.getNodePadding()">
      <tree-node-expander [node]="node"></tree-node-expander>
      <div class="node-content-wrapper"
        [class.node-content-wrapper-active]="node.isActive"
        [class.node-content-wrapper-focused]="node.isFocused"
        (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"></tree-node-content>
      </div>
    </div>
  </ng-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

<ng-template #treeNodeFullTemplate
          let-node
          let-index="index"
          let-templates="templates">
  <div
    [class]="node.getClass()"
    [class.tree-node]="true"
    [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>

    <tree-node-wrapper [node]="node" [index]="index" [templates]="templates">
    </tree-node-wrapper>

    <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>
</ng-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.