How do I programmatically add children to the children of the parent Node using Angular Tree component

Question

I am having a problem using angular tree component. I believe that this problem is simple but I can quite wrap my head around it. I can't seem to be able to add child nodes to the children of the parent node. That is the grandchildren of the root node and so on. I will like to add great grandchildren and so on but I am still struggling with adding grand children. If anybody has seen integralUiTreeview on lidorsystems. Then you can understand. Here is the link to the example https://www.lidorsystems.com/support/articles/angular/treeview/treeview-add-items-dynamically/ of what I am trying to do. Looking around all over the internet I came to learn that this isn't very easy to do but I am using angular tree component and all I just want to know is how to add children with just a click of the button. I have succeeded in adding children to a root node but only to the first root. What I will like to know is how to add a child to whatever node I want to and possibly how to delete it too. I believe I can take care of the editing part myself. If lidorsystems was free I would have used it. How can I do this?

Here is the code that I used to add the root nodes

createRootNode() {
  this.mainQuestion = this.surveyForm.get('firstQuestion').value;
  this.nodes.push({name: this.mainQuestion, children: []});
  console.log(this.nodes);
  this.tree.treeModel.update();
}

while this is the one for the child node for the first root. Though it's all conventional:

  addNode(tree) {
    this.nodes[0].children.push({

      name: 'a new child',
      children: []

    });
    tree.treeModel.update();
  }

And here is the html:

  <div >
    <tree-root class="tree" #tree [nodes]="nodes"  [focused]="true" [options]="options">

      <ng-template #treeNodeTemplate let-node>
        <span title="{{node.data.name}}">{{ node.data.name }}</span>
        <span class="pull-right">{{ childrenCount(node) }}</span>
        <button (click)="addNode(tree)">add</button>
      </ng-template>
    </tree-root>
</div>

Answer 1

For anyone who wants to use angular tree component to create a tree view this is the basic process of adding and deleting nodes from the tree:

Adding - Ts file :

    addNode(parent: TreeNode) {
   this.tree.treeModel.setFocus(true);
  const value = {
    name: 'a new child',
    children: []
  };
  if (parent) {
  parent.data.children.push(value);
  }
   this.tree.treeModel.update();
  }

Html file :

  <div >
<tree-root class="tree" #tree [nodes]="nodes"  [focused]="true" [options]="options">

  <ng-template #treeNodeTemplate let-node>
    <span title="{{node.data.name}}">{{ node.data.name }}</span>
    <span class="pull-right">{{ childrenCount(node) }}</span>
    <button  mat-icon-button (click)="addNode(node)" aria-label="Icon-button with an add icon">
        <mat-icon>add</mat-icon>
      </button>
      <button  mat-icon-button (click)="removeNode(node)" aria-label="Icon-button with a delete icon">
        <mat-icon>close</mat-icon>
      </button>
  </ng-template>
</tree-root>

For deleting nodes :

    removeNode(node: TreeNode): void {
    if (node.parent != null) {
        node.parent.data.children.splice(node.parent.data.children.indexOf(node.data), 1);
        this.tree.treeModel.update();
    }
}

The Html for deleting nodes is written above. If you are curious about the children count function written above here is the code:

   childrenCount(node: TreeNode): string {
    return node && node.children ? `(${node.children.length})` : '';
  }

you can also go to https://github.com/500tech/angular-tree-component/issues/432 to browse issues that have to do with adding and removing nodes. Most solutions are written there though the community isn't very big or very active. I hope this helps. If I find a solution for editing I will post it here too.