All Options

All available options:
displayField
childrenField
idField
isExpandedField
getChildren
actionMapping
isHiddenField
levelPadding
nodeClass
allowDrag
allowDrop
useVirtualScroll
nodeHeight
dropSlotHeight

<tree-root [nodes]="nodes" [options]="options"></tree-root>

The following properties of the options object are available.
You can find them in ITreeOptions interface in defs/api.ts

displayField

📘
A string representing the attribute of the node to display.
Default value: name.
For example, if your nodes have a title attribute that should be displayed, use:
  options = { displayField: 'title' }

childrenField

📘
A string representing the attribute of the node that contains the array of children.
Default value: children.
For example, if your nodes have a nodes attribute, that contains the children, use:
  options = { childrenField: 'nodes' }

idField

📘
A string representing the attribute of the node that contains the unique ID.
This will be used to construct the path, which is an array of IDs that point to the node.
Default value: id.
For example, if your nodes have a uuid attribute, that contains the unique key, use:
  options = { idField: 'uuid' }

isExpandedField

📘
A string representing the attribute of the node that contains whether the node starts as expanded.
Default value: isExpanded.
For example, if your nodes have an expanded attribute, that contains a boolean value, use:
  options = { isExpandedField: 'expanded' }

getChildren

📘
Function for loading a node's children.
The function receives a TreeNode, and returns a value or a promise that resolves to the node's children.
This function will be called whenever a node is expanded, the hasChildren field is true, and the children field is empty.
The result will be loaded into the node's children attribute.
Example:
options = {
  getChildren: (node:TreeNode) => {
    return request('/api/children/' + node.id);
  }
}

actionMapping

📘
Rewire which trigger causes which action using this attribute, or create custom actions / event bindings.
See the Action Mapping Section for more details.
Default value: see Action Mapping Section
For example, overriding shift+click to do multi select, and enter key to do a custom callback:
import {
  TreeComponent,
  TreeNode,
  TREE_ACTIONS,
  KEYS,
  IActionMapping
} from 'angular2-tree-component';

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

MyComponent {
  treeOptions = {
    actionMapping
  }
}

<Tree  [nodes]="nodes"  [options]="treeOptions"></Tree>

isHiddenField

📘
The name of the node's field that determines if the node's element is displayed or not.
Default value: isHidden.
For example, if one of your nodes has a hidden attribute, that contains true, and you give the following configuration, then it will not be displayed:
  options = { isHiddenField: 'hidden' }
  nodes = [
    { id: 1, hidden: true, name: 'node1'},
    { id: 2, name: 'node2'},
    ...
  ]

levelPadding

📘
Specify padding per node (integer).
Each node will have padding-left value of level * levelPadding, instead of using the default padding for children.
This option is good for example for allowing whole row selection, etc.
You can alternatively use the tree-node-level-X classes to give padding on a per-level basis.
Default value: 0.

nodeClass

📘
Specify a function that returns a class per node. Useful for styling the nodes individually.
Example:
options = {
  nodeClass: (node:TreeNode) => {
    return 'icon-' + node.data.icon;
  }
}

allowDrag

📘
Specify if dragging tree nodes is allowed.
Default value: false.
Example:
options = {
  allowDrag: true
}

allowDrop

📘
Specify whether dropping inside the tree is allowed. Optional types:

boolean

(element:any, to:{parent:ITreeNode, index:number}):boolean
A function that receives the dragged element, and the drop location (parent node and index inside the parent), and returns true or false.

defaultValue: true
example:
options = {
  allowDrop: (element, {parent, index}) => parent.isLeaf
}

useVirtualScroll

📘
Boolean flag to use the virtual scroll option.
To use this option, one must supply the height of the container, and the height of each node in the tree.
You can also specify height for the dropSlot which is located between nodes.
defaultValue: false
example:
options = {
  useVirtualScroll: true,
  nodeHeight: (node: TreeNode) => node.myHeight,
  dropSlotHeight: 3
}

nodeHeight

📘
For use with useVirtualScroll option.
Specify a height for nodes in pixels. Could be either:

number

(node: TreeNode) => number

defaultValue: 22

dropSlotHeight

📘
For use with useVirtualScroll option.
Specify a height for drop slots (located between nodes) in pixels
defaultValue: 2