The Tree component also supports many advanced features:

• The customized content can be displayed using the template tag ng-template.
• The lazy loading feature is available using the onNodeExpand event callback.
• ContextMenu for each tree node is applied using a local template reference variable.
• The horizontal layout of the Tree component is displayed using layout="horizontal" expression.
• The drag-and-drop feature between source and target Tree components is achieved by enabling draggableNodes and droppableNodes properties. The dragdropScope attribute is used to restrict drag-and-drop support to a specific area.

The row expansion or collapse behavior can be achieved in a programmatic way by externalizing the API methods. For example, a tree with external buttons, which are used to expand or collapse tree nodes in a programmatic way using event callbacks is shown here:

<p-tree #expandingTree [value]="programmaticTree"></p-tree>
<div>
  <button pButton type="text" label="Expand all" (click)="expandAll()">
   </button>
  <button pButton type="text" label="Collapse all" (click)="collapseAll()"></button>
</div>

The component class defined with event callbacks to toggle the tree nodes in a recursive nature is shown here:

expandAll() {
  this.programmaticTree.forEach( (node: any) => {
    this.expandRecursive(node, true);
  } );
}

collapseAll() {
  this.programmaticTree.forEach((node: any) => {
    this.expandRecursive(node, false);
  } );
}

expandRecursive(node: TreeNode, isExpand: boolean) {
  node.expanded = isExpand;
  if (node.children) {
    node.children.forEach( childNode => {
      this.expandRecursive(childNode, isExpand);
    } );
  }
}

The component also supports four event callbacks such as onNodeExpand, onNodeCollapse, onNodeDrop, and onNodeContextMenuSelect. The following events table provides complete details of events, parameters, and their description: