Options

Pass options to the Tree component

JavaScript

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

📘

nodes

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

• id (required) - a unique ID (among siblings) that will be used to identify the path to the node in the tree
• name - will be displayed by default in the tree
• children - an array of the node's children
• 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

Example:

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

📘

focused

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

The options object

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 the unique key, use:

  options = { isExpandedField: 'expanded' }

📘

treeNodeTemplate

This could be either a string, or a component. This template will be displayed for each node of the tree.
When using a string, you have the node variable available to use, which is the original node, wrapped with TreeNode.
When using a component, you receive the node as Input. You can see the ITreeNodeTemplateComponent interface for the component in defs/api.ts.

You can access the original data on node.data.

Also, you can use all methods of TreeNode on 'node' itself, such as isLeaf, toggle, isCollapsed, fireEvent and many more. See ITreeNode, as defined in defs/api.ts.

Default value: '{{ node.displayField }}'

Examples:
String

options = { treeNodeTemplate: '<a [href]="node.link">{{ node.data.name }}</a>' }

Component

@Component({
    template: '<a (click)="node.toggle())">{{ node.data.name }}</a>'
})
class MyTreeNodeTemplate {
  @Input() node: TreeNode;
}

options = { treeNodeTemplate: MyTreeNodeTemplate }

📘

loadingComponent

This could be either a string, or a component. This template will be used when loading children asynchronously.

Default value: 'loading...'

Examples:
String

options = { loadingComponent: 'loading, please wait...' }

Component

@Component({
    template: '<img src="loading.gif"/>'
})
class MyLoadingComponent {
}

options = { loadingComponent: MyLoadingComponent }

📘

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);
  }
}

📘

hasCustomContextMenu

Determines whether the native context menu should be prevented on right-click.
Opening the actual context menu can be handled using the onContextMenu, or inside a custom template.

Default value: false

📘

context

This can be used inside the custom template, when you want to call methods or use properties from the encapsulating component.

Default value: null

Example:

MyComponent {
  treeOptions = {
    treeNodeTemplate: '{{ node.data.name }} <button ng-click="context.doSomething()">Go!</button>'
    context: this
  }

  doSomething() {
  }
}

📘

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 = { isHidden: 'hidden' }
  nodes = [
    { id: 1, hidden: true, name: 'node1'},
    { id: 1, name: 'node2'},
    ...
  ]