Emitted when the active node is changed.
<igx-tree (activeNodeChanged)="activeNodeChanged($event)"></igx-tree>
Get/Set the animation settings that branches should use when expanding/collpasing.
<igx-tree [animationSettings]="customAnimationSettings">
</igx-tree>
const animationSettings: ToggleAnimationSettings = {
openAnimation: growVerIn,
closeAnimation: growVerOut
};
this.tree.animationSettings = animationSettings;
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>
Emitted when a node is collapsed, after it finishes
<igx-tree (nodeCollapsed)="handleNodeCollapsed($event)">
</igx-tree>
public handleNodeCollapsed(event: ITreeNodeToggledEventArgs) {
const collapsedNode: IgxTreeNode<any> = event.node;
console.log("Node is collapsed: ", collapsedNode.data);
}
Emitted when a node is collapsing, before it finishes
<igx-tree (nodeCollapsing)="handleNodeCollapsing($event)">
</igx-tree>
public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) {
const collapsedNode: IgxTreeNode<any> = event.node;
if (collapsedNode.alwaysOpen) {
event.cancel = true;
}
}
Emitted when a node is expanded, after it finishes
<igx-tree (nodeExpanded)="handleNodeExpanded($event)">
</igx-tree>
public handleNodeExpanded(event: ITreeNodeToggledEventArgs) {
const expandedNode: IgxTreeNode<any> = event.node;
console.log("Node is expanded: ", expandedNode.data);
}
Emitted when a node is expanding, before it finishes
<igx-tree (nodeExpanding)="handleNodeExpanding($event)">
</igx-tree>
public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) {
const expandedNode: IgxTreeNode<any> = event.node;
if (expandedNode.disabled) {
event.cancel = true;
}
}
Emitted when the node selection is changed through interaction
<igx-tree (nodeSelection)="handleNodeSelection($event)">
</igx-tree>
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);
}
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>
const tree: IgxTree = this.tree;
this.tree.singleBranchExpand = false;
Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
Returns all root level nodes
const tree: IgxTree = this.tree;
const rootNodes: IgxTreeNodeComponent<any>[] = tree.rootNodes;
Gets/Sets tree selection mode
By default the tree selection mode is 'None'
Collapses all of the passed nodes. If no nodes are passed, collapses ALL nodes
nodes to be collapsed
const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.collapsible);
tree.collapseAll(nodes);
Deselect all nodes if the nodes collection is empty. Otherwise, deselect the nodes in the nodes collection.
const arr = [
this.tree.nodes.toArray()[0],
this.tree.nodes.toArray()[1]
];
this.tree.deselectAll(arr);
Expands all of the passed nodes. If no nodes are passed, expands ALL nodes
nodes to be expanded
const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.expandable);
tree.expandAll(nodes);
Returns all of the nodes that match the passed searchTerm. Accepts a custom comparer function for evaluating the search term against the nodes.
Default search compares the passed searchTerm against the node's data Input.
When using findNodes w/o a comparer, make sure all nodes have data passed.
Array of nodes that match the search. null if no nodes are found.
<igx-tree>
<igx-tree-node *ngFor="let node of data" [data]="node">
{{ node.label }}
</igx-tree-node>
</igx-tree>
public data: DataEntry[] = FETCHED_DATA;
...
const matchedNodes: IgxTreeNode<DataEntry>[] = this.tree.findNodes<DataEntry>(searchTerm: data[5]);
Using a custom comparer
public data: DataEntry[] = FETCHED_DATA;
...
const comparer: IgxTreeSearchResolver = (data: any, node: IgxTreeNode<DataEntry>) {
return node.data.index % 2 === 0;
}
const evenIndexNodes: IgxTreeNode<DataEntry>[] = this.tree.findNodes<DataEntry>(null, comparer);
The data of the searched node
A custom comparer function that evaluates the passed searchTerm against all nodes.
IgxTreeComponent allows a developer to show a set of nodes in a hierarchical fashion.
Igx Module
IgxTreeModule
Igx Keywords
tree
Igx Theme
igx-tree-theme
Igx Group
Grids & Lists
Remark
The Angular Tree Component allows users to represent hierarchical data in a tree-view structure, maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model. Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures. The Ignite UI for Angular Tree Component also provides load on demand capabilities, item activation, bi-state and cascading selection of items through built-in checkboxes, built-in keyboard navigation and more.
Example