Class IgxTreeComponent

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

<igx-tree>
<igx-tree-node>
I am a parent node 1
<igx-tree-node>
I am a child node 1
</igx-tree-node>
...
</igx-tree-node>
...
</igx-tree>

Hierarchy

Hierarchy

  • DisplayDensityBase
    • IgxTreeComponent

Implements

  • IgxTree
  • OnInit
  • AfterViewInit
  • OnDestroy

Constructors

Properties

activeNodeChanged: EventEmitter<IgxTreeNode<any>> = ...

Emitted when the active node is changed.

Example

<igx-tree (activeNodeChanged)="activeNodeChanged($event)"></igx-tree>
animationSettings: ToggleAnimationSettings = ...

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;
cssClass: string = 'igx-tree'
densityChanged: EventEmitter<IDensityChangedEventArgs> = ...
expandIndicator: TemplateRef<any>

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>
nodeCollapsed: EventEmitter<ITreeNodeToggledEventArgs> = ...

Emitted when a node is collapsed, after it finishes

Example

<igx-tree (nodeCollapsed)="handleNodeCollapsed($event)">
</igx-tree>
public handleNodeCollapsed(event: ITreeNodeToggledEventArgs) {
const collapsedNode: IgxTreeNode<any> = event.node;
console.log("Node is collapsed: ", collapsedNode.data);
}
nodeCollapsing: EventEmitter<ITreeNodeTogglingEventArgs> = ...

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;
}
}
nodeExpanded: EventEmitter<ITreeNodeToggledEventArgs> = ...

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);
}
nodeExpanding: EventEmitter<ITreeNodeTogglingEventArgs> = ...

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;
}
}
nodeSelection: EventEmitter<ITreeNodeSelectionEvent> = ...

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);
}
singleBranchExpand: boolean = false

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;

Accessors

Methods

  • Returns all of the nodes that match the passed searchTerm. Accepts a custom comparer function for evaluating the search term against the nodes.

    Remark

    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.

    Returns

    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);

    Parameters

    • searchTerm: any

      The data of the searched node

    • Optional comparer: IgxTreeSearchResolver

      A custom comparer function that evaluates the passed searchTerm against all nodes.

    Returns IgxTreeNodeComponent<any>[]