Guides

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 a node variable, which exposes many useful methods, as well as a data attribute with the original node's data.

For example:

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

#loadingTemplate

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

For example:

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