Guides

Inputs to Tree component:

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

nodes

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

  • id - 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
  • isHidden - determines whether the node is displayed or not

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.

options

See the options section in the left sidebar for details.