Customize Actions

Demo

Override key and mouse actions

Angular Tree Component comes with a default mapping of mouse events and key events to actions. For example - click on the node activates / deactivates it, click on the expander expands / collapses it, pressing space or enter will toggle the node activation (same as click), etc.

Using the actionMapping option, you can override how the tree reacts to mouse and key events, by providing a custom mapping.

import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular-tree-component';

const actionMapping:IActionMapping = {
  mouse: {
    click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI
  },
  keys: {
    [KEYS.ENTER]: (tree, node, $event) => alert(`This is ${node.data.name}`)
  }  
}

actionMapping (IActionMapping)

The actionMapping attribute needs to implement the IActionMapping interface, which is an object that maps predefined mouse events, and key codes, to callbacks.
See full API Here: ActionMapping

The callback (IActionHandler)

The callback always receives three parameters: TreeModel, TreeNode, and $event.

TREE_ACTIONS

Notice the TREE_ACTIONS object. It holds predefined callbacks that do common actions.
The available attributes are:

TOGGLE_ACTIVE
TOGGLE_ACTIVE_MULTI
ACTIVATE
DEACTIVATE
TOGGLE_SELECTED
SELECT
DESELECT
FOCUS
TOGGLE_EXPANDED
EXPAND
COLLAPSE
DRILL_DOWN
DRILL_UP
NEXT_NODE
PREVIOUS_NODE
MOVE_NODE

Mouse actions

In mouse actions, the TreeNode parameter of the callback is the node that the event was activated on (e.g. clicked on).

The possible attributes for actionMapping.mouse are:

click
dblClick
expanderClick
checkboxClick
contextMenu (right click)
dragStart
drag
dragOver
dragEnd
dragLeave
dragEnter
drop

For example:

import { TREE_ACTIONS, IActionMapping } from 'angular-tree-component';

actionMapping:IActionMapping = {
  mouse: {
    dblClick: (tree, node, $event) => // Open a modal with node content,
    click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI,
  }
}

Shift+Click (Alt / Ctrl)

If you want to perform actions based on modifier keys, use $event.shiftKey, $event.ctrlKey etc., provided on the third callback argument - $event.

Keyboard events

In keyboard events, the TreeNode parameter of the callback is the currently focused node. In case no node is focused, this will be null.

The attributes for actionMapping.keys are integers which represent the key code (e.g. 32 for Space)

angular-tree-component exposes a KEYS constant with predefined common key codes:

KEYS = {    
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
  ENTER: 13,
  SPACE: 32
}

So you can use those, or pass any keycode you'd like.

For example:

import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular-tree-component';

actionMapping:IActionMapping = {
  keys: {
    127: (tree, node, $event) => // do something to delete the node,
    [KEYS.ENTER]: TREE_ACTIONS.EXPAND
  }
}

Default mapping

Here is the default mapping that ships with angular-tree-component:

const defaultActionMapping: IActionMapping = {
  mouse: {
    click: TREE_ACTIONS.TOGGLE_ACTIVE,
    dblClick: null,
    contextMenu: null,
    expanderClick: TREE_ACTIONS.TOGGLE_EXPANDED,
    checkboxClick: TREE_ACTIONS.TOGGLE_SELECTED,
    drop: TREE_ACTIONS.MOVE_NODE
  },
  keys: {
    [KEYS.RIGHT]: TREE_ACTIONS.DRILL_DOWN,
    [KEYS.LEFT]: TREE_ACTIONS.DRILL_UP,
    [KEYS.DOWN]: TREE_ACTIONS.NEXT_NODE,
    [KEYS.UP]: TREE_ACTIONS.PREVIOUS_NODE,
    [KEYS.SPACE]: TREE_ACTIONS.TOGGLE_ACTIVE,
    [KEYS.ENTER]: TREE_ACTIONS.TOGGLE_ACTIVE
  }
};

Context menu

In case you want to open your own context menu, you must first run $event.preventDefault() within the callback.