The tree node component represents a child node of the tree component or another tree node. Usage:
<igx-tree>
...
<igx-tree-node [data]="data" [selected]="service.isNodeSelected(data.Key)" [expanded]="service.isNodeExpanded(data.Key)">
{{ data.FirstName }} {{ data.LastName }}
</igx-tree-node>
...
</igx-tree>Constructors
Section titled "Constructors"IgxTreeNodeComponent
new IgxTreeNodeComponent(): IgxTreeNodeComponentDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:368
Returns IgxTreeNodeComponent
Properties
Section titled "Properties"The data entry that the node is visualizing.
data: TDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:160
Remarks
Required for searching through nodes.
Example
<igx-tree>
...
<igx-tree-node [data]="data">
{{ data.FirstName }} {{ data.LastName }}
</igx-tree-node>
...
</igx-tree>expandedChange
Section titled "expandedChange"Emitted when the node's expanded property changes.
<igx-tree>
<igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded">
</igx-tree-node>
</igx-tree>const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e))expandedChange: EventEmitter<boolean>Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:265
loading
Section titled "loading"To be used for load-on-demand scenarios in order to specify whether the node is loading data.
loading: boolean = falseDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:169
Remarks
Loading nodes do not render children.
parentNode
Section titled "parentNode"parentNode: IgxTreeNode<any>Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:140
selectedChange
Section titled "selectedChange"Emitted when the node's selected property changes.
<igx-tree>
<igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected">
</igx-tree-node>
</igx-tree>const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e))selectedChange: EventEmitter<boolean>Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:247
tree: IgxTreeDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:134
active
Section titled "active"active: booleanDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:220, projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:227
disabled
Section titled "disabled"disabled: booleanDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:293, projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:297
expanded
Section titled "expanded"expanded: booleanDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:462, projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:466
resourceStrings
Section titled "resourceStrings"resourceStrings: ITreeResourceStringsDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:203, projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:210
selected
Section titled "selected"selected: booleanDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:427, projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:431
Accessors
Section titled "Accessors"children
Section titled "children"Return the child nodes of the node (if any)
get children(): IgxTreeNode<any>[]Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:338
Example
const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
const children: IgxTreeNode<any>[] = node.children;Returns IgxTreeNode<any>[]
level
Section titled "level"The depth of the node, relative to the root
<igx-tree>
...
<igx-tree-node #node>
My level is {{ node.level }}
</igx-tree-node>
</igx-tree>const node: IgxTreeNode<any> = this.tree.findNodes(data[12])[0];
const level: number = node.level;get level(): numberDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:405
Returns number
Retrieves the full path to the node incuding itself
const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
const path: IgxTreeNode<any>[] = node.path;get path(): IgxTreeNode<any>[]Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:281
Returns IgxTreeNode<any>[]
Methods
Section titled "Methods"collapse
Section titled "collapse"Collapses the node, triggering animation
<igx-tree>
<igx-tree-node #node>My Node</igx-tree-node>
</igx-tree>
<button type="button" igxButton (click)="node.collapse()">Collapse Node</button>const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
myNode.collapse();collapse(): voidDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:665
Returns void
expand
Section titled "expand"Expands the node, triggering animation
<igx-tree>
<igx-tree-node #node>My Node</igx-tree-node>
</igx-tree>
<button type="button" igxButton (click)="node.expand()">Expand Node</button>const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
myNode.expand();expand(): voidDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:630
Returns void
toggle
Section titled "toggle"Toggles the node expansion state, triggering animation
<igx-tree>
<igx-tree-node #node>My Node</igx-tree-node>
</igx-tree>
<button type="button" igxButton (click)="node.toggle()">Toggle Node</button>const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
myNode.toggle();toggle(): voidDefined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:580