Events

Registering events
toggleExpanded
activate / nodeActivate
deactivate / nodeDeactivate
focus
blur
initialized
updateData
moveNode
copyNode
loadNodeChildren
changeFilter
stateChange
event

Registering events

You can react to whatever happened on the tree by registering to events.
If you're looking to override behaviour - see Customize actions section.

Events use Angular's output:

JavaScript

<tree-root [nodes]="nodes"
    (toggleExpanded)="onEvent($event)"
    (activate)="onEvent($event)"
    (focus)="onEvent($event)"
    (blur)="onEvent($event)">
  </tree-root>

  onEvent = ($event) => console.log($event);

treeModel

All events have a treeModel attribute that allows you to access the tree API.
Specific events and other attributes are listed below:

toggleExpanded

Triggers when expanding / collapsing a tree node.

📘

Parameters

eventName: string
node: ITreeNode
isActive: boolean

activate / nodeActivate

Triggers when activating a tree node, by clicking on the node, or by using the Enter / Space keys.
nodeActivate is an alias to support older browser versions.

📘

Parameters

eventName: string
node: ITreeNode

deactivate / nodeDeactivate

Triggers when deactivating a tree node, by clicking on the node, or by using the Enter or Space keys.
nodeDeactivate is an alias to support older browser versions.

📘

Parameters

eventName: string
node: ITreeNode

focus

Triggers when focusing on a node, by moving with the arrow keys.

📘

Parameters

eventName: string
node: ITreeNode

blur

Triggers when focusing on a node, by moving with the arrow keys.

📘

Parameters

eventName: string
node: ITreeNode

initialized

Triggers after tree model was created.
Good for performing actions immediately on init, like expanding / activating certain nodes, etc.
You can access the tree model using a ref, as described in the API section.

📘

Parameters

eventName: string

updateData

Triggers after tree model was updated, either by changing the inputs of the tree (nodes, options, etc.) or a direct call to update().

📘

Parameters

eventName: string

moveNode

This event is fired any time moveNode is called on the tree.
Typically - when drag and dropping a node.

📘

Parameters

eventName: string
node: ITreeNode. The node that was moved
to: Object containing:
parent: The parent node that contains the moved node
index: Index in the parent where the node was moved

copyNode

This event is fired any time copyNode is called on the tree.
Typically - when drag and dropping a node while ctrl key is pressed.

📘

Parameters

eventName: string
node: ITreeNode. The node that was copied
to: Object containing:
parent: The parent node that contains the copied node
index: Index in the parent where the node was copied

event

Catch-all event that is triggered on every other event that is triggered.
Useful for doing the same action for different events by checking the eventName.
The parameters will match whatever event was sent originally.

📘

Parameters

eventName: string
...rest: corresponding to the original event

loadNodeChildren

Callback after async children were added to the tree

📘

Parameters

eventName: string
node: ITreeNode. The parent node

changeFilter

Fired after filter has changed or cleared

📘

Parameters

eventName: string

stateChange

Fired after tree state has changed. See Tree State Binding for more info

📘

state: ITreeState