Usage

Inputs to Tree component:

JavaScript

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

nodes

Array of root nodes of the tree.
Each node may contain the following fields:

Property	Description
id	Unique ID for the node. If one is not supplied it will be created by the tree library.
name	Will be displayed by default in the tree.
children	An array of the node's children. Each child is an object with the same structure as the parent node.
hasChildren	For async data load. Denotes that this node might have children, even when 'children' attr is empty.
isExpanded	Determines whether the node starts as expanded by default. Notice that this field is not bindable, meaning that changing it doesn't affect the tree and vice versa.

Example:

JSON

[
  {
    id: 1,
    name: 'root1',
    isExpanded: true,
    children: [
      {
        id: 2,
        name: 'child1'
      }, {
        id: 3,
        name: 'child2'
      }
    ]
  }
]

options

Object of type ITreeOptions.
See TreeOptions for a complete list, or visit the Guides category for specific use cases.

Example:

JavaScript

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

class MyComponent {
  ...
	options: ITreeOptions = {
    displayField: 'nodeName',
    isExpandedField: 'expanded',
    idField: 'uuid',
    hasChildrenField: 'hasChildren',
    actionMapping: {
      mouse: {
        dblClick: (tree, node, $event) => {
      		if (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
    		}
      }
    },
    nodeHeight: 23,
    allowDrag: (node) => {
      return true;
    },
    allowDrop: (node) => {
      return true;
    },
    useVirtualScroll: true,
    animateExpand: true,
    animateSpeed: 30,
    animateAcceleration: 1.2
  }
}

focused

Whether the tree should be focused. Key navigation only works when the tree is focused.
Default value: false.