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(): IgxTreeNodeComponent

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:369

Returns IgxTreeNodeComponent

Properties

Section titled "Properties"

data

Section titled "data"

The data entry that the node is visualizing.

 
data: T

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:161

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:266

loading

Section titled "loading"

To be used for load-on-demand scenarios in order to specify whether the node is loading data.

 
loading: boolean = false

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:170

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:141

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:248

tree

Section titled "tree" 
tree: IgxTree

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:135

Accessors

Section titled "Accessors"

active

Section titled "active" 
get active(): boolean

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:228

Returns boolean

Gets/Sets the active state of the node

 
set active(value: boolean): void

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:221

Parameters

  • value: boolean

Returns void

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:339

Example

const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
const children: IgxTreeNode<any>[] = node.children;

Returns IgxTreeNode<any>[]

disabled

Section titled "disabled"

Gets/Sets the disabled state of the node

 
get disabled(): boolean

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:294

Returns boolean 

set disabled(value: boolean): void

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:298

Parameters

  • value: boolean

Returns void

expanded

Section titled "expanded"

Get/set whether the node is expanded

<igx-tree>
 ...
 <igx-tree-node *ngFor="let node of data" [expanded]="node.name === this.expandedNode">
     {{ node.label }}
 </igx-tree-node>
</igx-tree>
const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
const expanded = node.expanded;
node.expanded = true;
get expanded(): boolean

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:463

Returns boolean 

set expanded(val: boolean): void

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:467

Parameters

  • val: boolean

Returns void

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(): number

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:406

Returns number

path

Section titled "path"

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:282

Returns IgxTreeNode<any>[]

resourceStrings

Section titled "resourceStrings"

An accessor that returns the resource strings.

 
get resourceStrings(): ITreeResourceStrings

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:211

Returns ITreeResourceStrings

Gets/Sets the resource strings.

 
set resourceStrings(value: ITreeResourceStrings): void

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:204

Parameters

Returns void

selected

Section titled "selected"

Get/set whether the node is selected. Supporst two-way binding.

<igx-tree>
 ...
 <igx-tree-node *ngFor="let node of data" [(selected)]="node.selected">
     {{ node.label }}
 </igx-tree-node>
</igx-tree>
const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
const selected = node.selected;
node.selected = true;
get selected(): boolean

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:428

Returns boolean 

set selected(val: boolean): void

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:432

Parameters

  • val: boolean

Returns void

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(): void

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:666

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(): void

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:631

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(): void

Defined in projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts:581

Returns void