Emitted when the active node is changed.

Example

<igx-tree (activeNodeChanged)="activeNodeChanged($event)"></igx-tree>
Copy

Get/Set the animation settings that branches should use when expanding/collpasing.

<igx-tree [animationSettings]="customAnimationSettings">
</igx-tree>
Copy

const animationSettings: ToggleAnimationSettings = {
     openAnimation: growVerIn,
     closeAnimation: growVerOut
};

this.tree.animationSettings = animationSettings;
Copy

A custom template to be used for the expand indicator of nodes

<igx-tree>
 <ng-template igxTreeExpandIndicator let-expanded>
     <igx-icon>{{ expanded ? "close_fullscreen": "open_in_full"}}</igx-icon>
 </ng-template>
</igx-tree>
Copy

Emitted when a node is collapsed, after it finishes

Example

<igx-tree (nodeCollapsed)="handleNodeCollapsed($event)">
</igx-tree>
Copy

public handleNodeCollapsed(event: ITreeNodeToggledEventArgs) {
 const collapsedNode: IgxTreeNode<any> = event.node;
 console.log("Node is collapsed: ", collapsedNode.data);
}
Copy

Emitted when a node is collapsing, before it finishes

<igx-tree (nodeCollapsing)="handleNodeCollapsing($event)">
</igx-tree>
Copy

public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) {
 const collapsedNode: IgxTreeNode<any> = event.node;
 if (collapsedNode.alwaysOpen) {
     event.cancel = true;
 }
}
Copy

Emitted when a node is expanded, after it finishes

<igx-tree (nodeExpanded)="handleNodeExpanded($event)">
</igx-tree>
Copy

public handleNodeExpanded(event: ITreeNodeToggledEventArgs) {
 const expandedNode: IgxTreeNode<any> = event.node;
 console.log("Node is expanded: ", expandedNode.data);
}
Copy

Emitted when a node is expanding, before it finishes

<igx-tree (nodeExpanding)="handleNodeExpanding($event)">
</igx-tree>
Copy

public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) {
 const expandedNode: IgxTreeNode<any> = event.node;
 if (expandedNode.disabled) {
     event.cancel = true;
 }
}
Copy

Emitted when the node selection is changed through interaction

<igx-tree (nodeSelection)="handleNodeSelection($event)">
</igx-tree>
Copy

public handleNodeSelection(event: ITreeNodeSelectionEvent) {
 const newSelection: IgxTreeNode<any>[] = event.newSelection;
 const added: IgxTreeNode<any>[] = event.added;
 console.log("New selection will be: ", newSelection);
 console.log("Added nodes: ", event.added);
}
Copy

Get/Set how the tree should handle branch expansion. If set to true, only a single branch can be expanded at a time, collapsing all others

<igx-tree [singleBranchExpand]="true">
...
</igx-tree>
Copy

const tree: IgxTree = this.tree;
this.tree.singleBranchExpand = false;
Copy

Get/Set if nodes should be expanded/collapsed when clicking over them.

<igx-tree [toggleNodeOnClick]="true">
...
</igx-tree>
Copy

const tree: IgxTree = this.tree;
this.tree.toggleNodeOnClick = false;
Copy