Events

Registering events
onActiveChanged
onActivate
onDeactivate
onFocus
onBlur
onDoubleClick - deprecated
onContextMenu - deprecated
onInitialized
onUpdateData
onMoveNode
onEvent

Registering events

JavaScript

<tree-root [nodes]="nodes"
    (onToggle)="onEvent($event)"
    (onActiveChanged)="onEvent($event)"
    (onFocus)="onEvent($event)"
    (onBlur)="onEvent($event)">
  </tree-root>

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

onActiveChanged

Triggers when activating / deactivating a tree node, by clicking on the node, or by using the Enter / Space keys.

📘

Parameters

eventName: string
node: ITreeNode
isActive: boolean

onActivate

Triggers when activating a tree node, by clicking on the node, or by using the Enter / Space keys.

📘

Parameters

eventName: string
node: ITreeNode

onDeactivate

Triggers when deactivating a tree node, by clicking on the node, or by using the Enter or Space keys.

📘

Parameters

eventName: string
node: ITreeNode

onFocus

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

📘

Parameters

eventName: string
node: ITreeNode

onBlur

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

📘

Parameters

eventName: string
node: ITreeNode

onInitialized

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

onUpdateData

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

onMoveNode

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

📘

Parameters

eventName: string
node: 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

onEvent

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