constructor

• new IgxTreeNodeComponent<T>(tree, selectionService, treeService, navService, cdr, animationService, element, parentNode): IgxTreeNodeComponent<T>

• Type parameters

  Type Parameters

  • T

  Parameters

  • tree: IgxTree

  • selectionService: IgxTreeSelectionService

  • treeService: IgxTreeService

  • navService: IgxTreeNavigationService

  • cdr: ChangeDetectorRef

  • animationService: AnimationService

  • element: ElementRef<HTMLElement>

  • parentNode: IgxTreeNode<any>

  Returns IgxTreeNodeComponent<T>

data

 <igx-tree>
 ...
   <igx-tree-node [data]="data">
     {{ data.FirstName }} {{ data.LastName }}
   </igx-tree-node>
 ...
 </igx-tree>
Copy

expandedChange

<igx-tree>
     <igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded">
     </igx-tree-node>
</igx-tree>
Copy

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

loading

parentNode

selectedChange

<igx-tree>
     <igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected">
     </igx-tree-node>
</igx-tree>
Copy

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

tree

active

• get active(): boolean

• Returns boolean

• set active(value): void

• Gets/Sets the active state of the node

  Parameters

  • value: boolean

  Returns void

children

• get children(): IgxTreeNode<any>[]

• Return the child nodes of the node (if any)

  Remark

  Returns null if node does not have children

  Example

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

  Returns IgxTreeNode<any>[]

disabled

• get disabled(): boolean

• Gets/Sets the disabled state of the node

  Returns boolean

• set disabled(value): void

• Parameters

  • value: boolean

  Returns void

expanded

• get expanded(): boolean

• 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>
  Copy

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

  Returns boolean

• set expanded(val): void

• Parameters

  • val: boolean

  Returns void

level

• get level(): number

• 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>
  Copy

  const node: IgxTreeNode<any> = this.tree.findNodes(data[12])[0];
  const level: number = node.level;
  Copy

  Returns number

path

• get path(): IgxTreeNode<any>[]

• 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;
  Copy

  Returns IgxTreeNode<any>[]

resourceStrings

• get resourceStrings(): ITreeResourceStrings

• An accessor that returns the resource strings.

  Returns ITreeResourceStrings

• set resourceStrings(value): void

• Gets/Sets the resource strings.

  Remarks

  Uses EN resources by default.

  Parameters

  • value: ITreeResourceStrings

  Returns void

selected

• get selected(): boolean

• 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>
  Copy

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

  Returns boolean

• set selected(val): void

• Parameters

  • val: boolean

  Returns void

size

• get size(): string

• Returns string

collapse

• collapse(): void

• 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>
  Copy

  const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
  myNode.collapse();
  Copy

  Returns void

expand

• expand(): void

• 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>
  Copy

  const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
  myNode.expand();
  Copy

  Returns void

ngOnDestroy

• ngOnDestroy(): void

• Returns void

toggle

• toggle(): void

• 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>
  Copy

  const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
  myNode.toggle();
  Copy

  Returns void