{"_id":"598622fad09433000f1b97ee","category":{"_id":"598622f9d09433000f1b97de","version":"598622f9d09433000f1b97dd","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-07-15T07:28:09.870Z","from_sync":false,"order":0,"slug":"getting-started","title":"Basic"},"parentDoc":null,"project":"5707c6875309d117006948d4","user":"54d742a80771980d0052f4b5","version":{"_id":"598622f9d09433000f1b97dd","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-08-05T19:56:41.267Z","releaseDate":"2017-08-05T19:56:41.267Z","categories":["598622f9d09433000f1b97de","598622f9d09433000f1b97df","598622f9d09433000f1b97e0","598622f9d09433000f1b97e1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"4.1.0","version":"4.1.0"},"__v":0,"updates":["5709f37eade45d0e00c1ad09","5888620e9c0cb025007c5008","58d045d8d920e11b004db792","59497bbe290b95002464d93d","5949a70864b5f5002690bbee"],"next":{"pages":[],"description":""},"createdAt":"2016-04-08T15:53:00.856Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Deprecation Notice!\",\n  \"body\": \"If you were using the old onXXX events (e.g. onActivate) - please use XXX (e.g. activate) instead, as these adhere to the Angular2 styleguide\"\n}\n[/block]\n[Registering events](#registering-events)\n[toggleExpanded](#toggleexpanded)\n[activate](#activate)\n[deactivate](#deactivate)\n[focus](#focus)\n[blur](#blur)\n[initialized](#initialized)\n[updateData](#updatedata)\n[moveNode](#movenode)\n[copyNode](#copynode)\n[loadNodeChildren](#loadNodeChildren)\n[changeFilter](#changeFilter)\n[stateChange](#stateChange)\n[event](#event)\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Registering events\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\t<tree-root [nodes]=\\\"nodes\\\"\\n    (onToggle)=\\\"onEvent($event)\\\"\\n    (onActiveChanged)=\\\"onEvent($event)\\\"\\n    (onFocus)=\\\"onEvent($event)\\\"\\n    (onBlur)=\\\"onEvent($event)\\\">\\n  </tree-root>\\n\\n  onEvent = ($event) => console.log($event);\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"treeModel\"\n}\n[/block]\nAll events have a `treeModel` attribute that allows you to access the tree API.\nSpecific events and other attributes are listed below:\n[block:api-header]\n{\n  \"title\": \"toggleExpanded\"\n}\n[/block]\nTriggers when expanding / collapsing a tree node.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\\n**node**: ITreeNode\\n**isActive**: boolean\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"activate\"\n}\n[/block]\nTriggers when activating a tree node, by clicking on the node, or by using the Enter / Space keys.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\\n**node**: ITreeNode\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"deactivate\"\n}\n[/block]\nTriggers when deactivating a tree node, by clicking on the node, or by using the Enter or Space keys.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\\n**node**: ITreeNode\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"focus\"\n}\n[/block]\nTriggers when focusing on a node, by moving with the arrow keys.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\\n**node**: ITreeNode\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"blur\"\n}\n[/block]\nTriggers when focusing on a node, by moving with the arrow keys.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\\n**node**: ITreeNode\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"initialized\"\n}\n[/block]\nTriggers after tree model was created.\nGood for performing actions immediately on init, like expanding / activating certain nodes, etc.\nYou can access the tree model using a ref, as described in the API section.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"updateData\"\n}\n[/block]\nTriggers after tree model was updated, either by changing the inputs of the tree (nodes, options, etc.) or a direct call to `update()`.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"moveNode\"\n}\n[/block]\nThis event is fired any time `moveNode` is called on the tree.\nTypically - when drag and dropping a node.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\\n**node**: ITreeNode. The node that was moved\\n**to**: Object containing:\\n  **parent**: The parent node that contains the moved node\\n  **index**: Index in the parent where the node was moved\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"copyNode\"\n}\n[/block]\nThis event is fired any time `copyNode` is called on the tree.\nTypically - when drag and dropping a node while `ctrl` key is pressed.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\\n**node**: ITreeNode. The node that was copied\\n**to**: Object containing:\\n  **parent**: The parent node that contains the copied node\\n  **index**: Index in the parent where the node was copied\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"event\"\n}\n[/block]\nCatch-all event that is triggered on every other event that is triggered.\nUseful for doing the same action for different events by checking the eventName.\nThe parameters will match whatever event was sent originally.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"**eventName**: string\\n**...rest**: corresponding to the original event\",\n  \"title\": \"Parameters\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"loadNodeChildren\"\n}\n[/block]\nCallback after async children were added to the tree\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\\n**node**: ITreeNode. The parent node\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"changeFilter\"\n}\n[/block]\nFired after filter has changed or cleared\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Parameters\",\n  \"body\": \"**eventName**: string\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"stateChange\"\n}\n[/block]\nFired after tree state has changed. See [Tree State Binding](doc:save-restore) for more info\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"**state**: ITreeState\"\n}\n[/block]","excerpt":"","slug":"events","type":"basic","title":"Events"}
[block:callout] { "type": "danger", "title": "Deprecation Notice!", "body": "If you were using the old onXXX events (e.g. onActivate) - please use XXX (e.g. activate) instead, as these adhere to the Angular2 styleguide" } [/block] [Registering events](#registering-events) [toggleExpanded](#toggleexpanded) [activate](#activate) [deactivate](#deactivate) [focus](#focus) [blur](#blur) [initialized](#initialized) [updateData](#updatedata) [moveNode](#movenode) [copyNode](#copynode) [loadNodeChildren](#loadNodeChildren) [changeFilter](#changeFilter) [stateChange](#stateChange) [event](#event) [block:api-header] { "type": "basic", "title": "Registering events" } [/block] [block:code] { "codes": [ { "code": "\t<tree-root [nodes]=\"nodes\"\n (onToggle)=\"onEvent($event)\"\n (onActiveChanged)=\"onEvent($event)\"\n (onFocus)=\"onEvent($event)\"\n (onBlur)=\"onEvent($event)\">\n </tree-root>\n\n onEvent = ($event) => console.log($event);\n", "language": "javascript" } ] } [/block] [block:api-header] { "title": "treeModel" } [/block] All events have a `treeModel` attribute that allows you to access the tree API. Specific events and other attributes are listed below: [block:api-header] { "title": "toggleExpanded" } [/block] Triggers when expanding / collapsing a tree node. [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string\n**node**: ITreeNode\n**isActive**: boolean" } [/block] [block:api-header] { "type": "basic", "title": "activate" } [/block] Triggers when activating a tree node, by clicking on the node, or by using the Enter / Space keys. [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string\n**node**: ITreeNode" } [/block] [block:api-header] { "type": "basic", "title": "deactivate" } [/block] Triggers when deactivating a tree node, by clicking on the node, or by using the Enter or Space keys. [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string\n**node**: ITreeNode" } [/block] [block:api-header] { "type": "basic", "title": "focus" } [/block] Triggers when focusing on a node, by moving with the arrow keys. [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string\n**node**: ITreeNode" } [/block] [block:api-header] { "type": "basic", "title": "blur" } [/block] Triggers when focusing on a node, by moving with the arrow keys. [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string\n**node**: ITreeNode" } [/block] [block:api-header] { "type": "basic", "title": "initialized" } [/block] 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. [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string" } [/block] [block:api-header] { "type": "basic", "title": "updateData" } [/block] Triggers after tree model was updated, either by changing the inputs of the tree (nodes, options, etc.) or a direct call to `update()`. [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string" } [/block] [block:api-header] { "type": "basic", "title": "moveNode" } [/block] This event is fired any time `moveNode` is called on the tree. Typically - when drag and dropping a node. [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string\n**node**: ITreeNode. The node that was moved\n**to**: Object containing:\n **parent**: The parent node that contains the moved node\n **index**: Index in the parent where the node was moved" } [/block] [block:api-header] { "title": "copyNode" } [/block] This event is fired any time `copyNode` is called on the tree. Typically - when drag and dropping a node while `ctrl` key is pressed. [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string\n**node**: ITreeNode. The node that was copied\n**to**: Object containing:\n **parent**: The parent node that contains the copied node\n **index**: Index in the parent where the node was copied" } [/block] [block:api-header] { "type": "basic", "title": "event" } [/block] 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. [block:callout] { "type": "info", "body": "**eventName**: string\n**...rest**: corresponding to the original event", "title": "Parameters" } [/block] [block:api-header] { "title": "loadNodeChildren" } [/block] Callback after async children were added to the tree [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string\n**node**: ITreeNode. The parent node" } [/block] [block:api-header] { "title": "changeFilter" } [/block] Fired after filter has changed or cleared [block:callout] { "type": "info", "title": "Parameters", "body": "**eventName**: string" } [/block] [block:api-header] { "title": "stateChange" } [/block] Fired after tree state has changed. See [Tree State Binding](doc:save-restore) for more info [block:callout] { "type": "info", "title": "**state**: ITreeState" } [/block]