title: How to delete node from nested tree in angular 5?
body: <p>This code will work to create a nested tree structure. I am also able to add sub node. I am stuck to delete current node and its children. 
  <strong>How to delete the current node and its children on clicking remove button</strong> <strong>also  how to add a new node at the same level</strong></p>
  
   <pre class="lang-js prettyprint-override"><code>    @Component({
            selector: 'tree-node'
            template: `
            &lt;div&gt;{{node.name}} &lt;button(click)="addNewNode(node)"&gt;Add&lt;/button&gt; &lt;button (click)="removeNode(node)"&gt;Remove&lt;/button&gt;&lt;/div&gt;
            &lt;ul&gt;
              &lt;li *ngFor="let node of node.children"&gt;
                &lt;tree-node  [node]="node"&gt;&lt;/tree-node&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          `})
  
    export class TreeNode {
            @Input() node;
      addNewNode(node) {
          const newNode = {name: 'newNode', children: []};
          node.children.push(newNode);
  
     }
  
      removeNode(node) {
      node.children = [] // this code will remove only its child node
      }
  }
           @Component({
            selector: 'my-app',
            providers: [],
            template: `
              &lt;div&gt;
                &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
                &lt;tree-node [node]="node"&gt;&lt;/tree-node&gt;
              &lt;/div&gt;
            `,
            directives: [TreeNode]
          })
          export class App {
            constructor() {
              this.name = 'Angular2 (Release Candidate!)'
            }
  
            node = {name: 'root', children: [
              {name: 'a', children: []},
              {name: 'b', children: []},
              {name: 'c', children: [
                {name: 'd', children: []},
                {name: 'e', children: []},
                {name: 'f', children: []},
               ]},
            ]};  
          }
  </code></pre>