All Options

Pass options to the Tree component

JavaScript

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

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.