Igx Module

IgxTreeModule

Igx Theme

igx-tree-theme

Igx Keywords

tree

Igx Group

Grids & Lists

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>

IgxTreeComponent

new IgxTreeComponent(): IgxTreeComponent

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

Returns IgxTreeComponent

activeNodeChanged: EventEmitter<IgxTreeNode<any>>

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

Example

<igx-tree (activeNodeChanged)="activeNodeChanged($event)"></igx-tree>

<igx-tree [animationSettings]="customAnimationSettings">
</igx-tree>

const animationSettings: ToggleAnimationSettings = {
     openAnimation: growVerIn,
     closeAnimation: growVerOut
};

this.tree.animationSettings = animationSettings;

animationSettings: ToggleAnimationSettings

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

cssClass: string = 'igx-tree'

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

<igx-tree>
 <ng-template igxTreeExpandIndicator let-expanded>
     <igx-icon>{{ expanded ? "close_fullscreen": "open_in_full"}}</igx-icon>
 </ng-template>
</igx-tree>

expandIndicator: TemplateRef<any>

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

nodeCollapsed: EventEmitter<ITreeNodeToggledEventArgs>

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

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

<igx-tree (nodeCollapsing)="handleNodeCollapsing($event)">
</igx-tree>

public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) {
 const collapsedNode: IgxTreeNode<any> = event.node;
 if (collapsedNode.alwaysOpen) {
     event.cancel = true;
 }
}

nodeCollapsing: EventEmitter<ITreeNodeTogglingEventArgs>

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

<igx-tree (nodeExpanded)="handleNodeExpanded($event)">
</igx-tree>

public handleNodeExpanded(event: ITreeNodeToggledEventArgs) {
 const expandedNode: IgxTreeNode<any> = event.node;
 console.log("Node is expanded: ", expandedNode.data);
}

nodeExpanded: EventEmitter<ITreeNodeToggledEventArgs>

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

<igx-tree (nodeExpanding)="handleNodeExpanding($event)">
</igx-tree>

public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) {
 const expandedNode: IgxTreeNode<any> = event.node;
 if (expandedNode.disabled) {
     event.cancel = true;
 }
}

nodeExpanding: EventEmitter<ITreeNodeTogglingEventArgs>

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

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

nodeSelection: EventEmitter<ITreeNodeSelectionEvent>

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

<igx-tree [singleBranchExpand]="true">
...
</igx-tree>

const tree: IgxTree = this.tree;
this.tree.singleBranchExpand = false;

singleBranchExpand: boolean = false

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

<igx-tree [toggleNodeOnClick]="true">
...
</igx-tree>

const tree: IgxTree = this.tree;
this.tree.toggleNodeOnClick = false;

toggleNodeOnClick: boolean = false

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

selection: IgxTreeSelectionType

Defined in projects/igniteui-angular/tree/src/tree/tree.component.ts:99, projects/igniteui-angular/tree/src/tree/tree.component.ts:103

const tree: IgxTree = this.tree;
const rootNodes: IgxTreeNodeComponent<any>[] = tree.rootNodes;

get rootNodes(): IgxTreeNodeComponent<any>[]

collapseAll(nodes: IgxTreeNode<any>[]): void

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

Parameters

• nodes: IgxTreeNode<any>[]

  nodes to be collapsed

  const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.collapsible);
  tree.collapseAll(nodes);

Returns void

deselectAll(nodes: IgxTreeNodeComponent<any>[]): void

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

Parameters

• nodes: IgxTreeNodeComponent<any>[]

Returns void

Example

const arr = [
     this.tree.nodes.toArray()[0],
     this.tree.nodes.toArray()[1]
 ];
 this.tree.deselectAll(arr);

expandAll(nodes: IgxTreeNode<any>[]): void

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

Parameters

• nodes: IgxTreeNode<any>[]

  nodes to be expanded

  const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.expandable);
  tree.expandAll(nodes);

Returns void

findNodes(searchTerm: any, comparer: IgxTreeSearchResolver): IgxTreeNodeComponent<any>[]

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

Parameters

• searchTerm: any

  The data of the searched node

• comparer: IgxTreeSearchResolver

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

Returns IgxTreeNodeComponent<any>[]