Components: Unable to delete a node [mat-tree component Angular Material 6.0.1]

Created on 31 May 2018 · 8Comments · Source: angular/components

insertNode is implemented but there's no method for deleting a node.
I tried removing the object from the array but it didn't work since the tree doesn't get updated.

Any ideas?

Source

Miru5

Most helpful comment

Hi, I create a parentMap to record each node's parent and delete node with it succesfully, here's the code

Declare the map

parentNodeMap = new Map<TreeNode, TreeNode>();

Set the map when inserting node

insertChild(parent: TreeNode) {
    const newChild = { name: '' } as TreeNode;
    if (parent.children) {
      parent.children.push(newChild);
      this.dataChange.next(this.data);
      this.parentNodeMap.set(newChild, parent);
    }
  }

Update the map after deleting

deleteNode(node: TreeNode) {
    const parentNode = this.parentNodeMap.get(node);
    const index = parentNode.children.indexOf(node);
    if (index !== -1) {
      parentNode.children.splice(index, 1);
      this.dataChange.next(this.data);
      this.parentNodeMap.delete(node);
    }
  }

hope this would be helpful.

covera on 27 Jul 2018

👍3

All 8 comments

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

josephperrott on 31 May 2018

any thing new with this issue?

Furqanaa on 7 Jun 2018

👍1

Hi, I create a parentMap to record each node's parent and delete node with it succesfully, here's the code

Declare the map

parentNodeMap = new Map<TreeNode, TreeNode>();

Set the map when inserting node

insertChild(parent: TreeNode) {
    const newChild = { name: '' } as TreeNode;
    if (parent.children) {
      parent.children.push(newChild);
      this.dataChange.next(this.data);
      this.parentNodeMap.set(newChild, parent);
    }
  }

Update the map after deleting

deleteNode(node: TreeNode) {
    const parentNode = this.parentNodeMap.get(node);
    const index = parentNode.children.indexOf(node);
    if (index !== -1) {
      parentNode.children.splice(index, 1);
      this.dataChange.next(this.data);
      this.parentNodeMap.delete(node);
    }
  }

hope this would be helpful.

covera on 27 Jul 2018

👍3

@covera Thank you it seems great. could you please publish your code using https://stackblitz.com/
you can use angular-material examples to save time.

Furqanaa on 27 Jul 2018

I am also facing the same issue,
I want to remove the leaf nodes on click of minus button.
I am using nested material tree
tree