Create tree view in the angular and add two buttons add and sub

Hi Prasad, Thanks so much. 

To achieve this functionality in an Angular application, you can create a tree structure using Angular components and templates, and then add the "ADD" and "SUB" buttons to each node. When the "ADD" button is clicked, you can clone the node and its children and add it to the tree. Here's a high-level outline of how you can implement this:

1. Create Angular components for the tree structure:

   • Create a component for the tree node, let's call it TreeNodeComponent.
   • Create a component for the tree itself, let's call it TreeComponent.

2. Define the data structure for the tree nodes. You can use an array of objects to represent each node and its children. For example:

interface TreeNode {
  name: string;
  children?: TreeNode[];
}

3. In the TreeNodeComponent template, display the node name and add "ADD" and "SUB" buttons.

  {{ node.name }}
  ADD
  SUB
  

    
    
  

4. In the TreeNodeComponent class, implement the addChild and cloneNode methods:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-tree-node',
  templateUrl: './tree-node.component.html',
  styleUrls: ['./tree-node.component.css'],
})
export class TreeNodeComponent {
  @Input() node: TreeNode;

  addChild() {
    if (!this.node.children) {
      this.node.children = [];
    }
    this.node.children.push({ name: 'New Node' }); // You can customize the name
  }

  cloneNode() {
    if (this.node.children) {
      const clonedNode = { ...this.node };
      this.node.children.push(clonedNode);
    }
  }
}

5. In the TreeComponent template, render the root node of the tree:

6. In your Angular application, you can now use the TreeComponent to display the tree structure. When you click the "ADD" button, a new child node will be added, and when you click the "SUB" button, a clone of the node will be added as a sibling.

Remember to import and declare the components in your module files as needed. This is a basic example, and you can customize it further based on your requirements, such as updating the node names or handling more complex tree structures.