Component: Need a 'tree' component

[benjamincharity]

Material CDK offers a tree component that can be used for our base. The Material Tree component uses it as a base, so we could lift some of their implementation if it helps. (links for both below)

Requirements

• Tree component ts-tree
  • Should support multiple levels: foo > bar > baz (ie can be nested)
  • Supports custom icons
  • Custom tree icon
    • treeIcons input
    • Accepts {open: 'my-icon', closed: 'my-other-icon'}
    • Default is keyboard_arrow_right when closed, keyboard_arrow_down when open
  • Custom node icon
    • nodeIcon input
    • No icon by default
  • Can be disabled
  • isDisabled input
  • By default, clicking anywhere on the top level tree opens the tree. This is overridden if an instance of tsTreeNodeToggle is found in the template. If found, only clicking that element will toggle the tree.
• Node component ts-tree-node
  • Nodes should be fully customizable with HTML
• Node toggle directive tsTreeNodeToggle
  • Basis it's toggle functionality off of the parent recursiveToggle property
  • Sub-sections can be recursively closed or opened
  • [tsTreeNodeToggleRecursive]="true" input

---

Possible usage examples:

<!-- Simple usage -->
<ts-tree>
  My tree!
  <ts-tree-node *ngFor="let item of items">{{ item }}</ts-tree-node>
</ts-tree>

<!-- Nested usage -->
<ts-tree>
  My tree!
  <ts-tree *ngFor="let tree of trees">
    {{ tree.name }}
    <ts-tree-node *ngFor="let item of tree.items">{{ item }}</ts-tree-node>
  </ts-tree>
</ts-tree>

<!-- Custom icons usage -->
<ts-tree [treeIcons]="myCustomTreeIconObject" [nodeIcon]="myNodeIcon">
  My tree!
  <ts-tree-node *ngFor="let item of items">{{ item }}</ts-tree-node>
</ts-tree>

<!-- Custom HTML usage -->
<ts-tree>
  My tree!
  <ts-tree-node *ngFor="let item of items">
    <div class="myClass">
      {{ item.name }}
      <small>{{ item.id }}</small>
    </div>
  </ts-tree-node>
</ts-tree>

<!-- Custom Toggle usage -->
<ts-tree>
  <button tsTreeNodeToggle [tsTreeNodeToggleRecursive]="true">
    Open Children
  </button>
  My tree!

  <ts-tree-node *ngFor="let item of items">
    <div class="myClass">
      {{ item.name }}
      <small>{{ item.id }}</small>
    </div>
  </ts-tree-node>
</ts-tree>

---

Resources

• CDK Tree
• Angular Material Tree

[baigfaizan95]

@benjamincharity I would love to work on this feature, please can you elaborate the requirements

[benjamincharity]

Absolutely! Let me work up a better requirements list today/tomorrow and then I'll update this issue 👍

[benjamincharity]

Updated 👍