How to delete node from nested tree in angular 5?

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. How to delete the current node and its children on clicking remove button also how to add a new node at the same level

    @Component({
          selector: 'tree-node'
          template: `
          <div>{{node.name}} <button(click)="addNewNode(node)">Add</button> <button (click)="removeNode(node)">Remove</button></div>
          <ul>
            <li *ngFor="let node of node.children">
              <tree-node  [node]="node"></tree-node>
            </li>
          </ul>
        `})

  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: `
            <div>
              <h2>Hello {{name}}</h2>
              <tree-node [node]="node"></tree-node>
            </div>
          `,
          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: []},
             ]},
          ]};  
        }