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

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.