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
:
<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
Updated less than a minute ago