Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(material/tree): removeNode method #29350

Open
GeorgianStan opened this issue Jun 28, 2024 · 0 comments
Open

feat(material/tree): removeNode method #29350

GeorgianStan opened this issue Jun 28, 2024 · 0 comments
Labels
area: cdk/tree feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@GeorgianStan
Copy link
Contributor

GeorgianStan commented Jun 28, 2024

Feature Description

There is a method for adding a node, insertNode(), but there is no method for deleting.
At the moment this can only be done by completely reinitializing the `data' object that is passed to the mat tree.

Use Case

One use case is in which there is a tree that can be modified by the user by adding and deleting nodes, without changing the state of the existing nodes.
For example, if the user expands the nodes and then wants to delete one of them, currently this can be implemented by saving the open nodes in a separate state, re-initializing the dataSource.data object after the desired node has been deleted and then restoring the open nodes .

  saveExpandedNodes() {
    this.#expandedNodes.splice(0, this.#expandedNodes.length);

    this.treeControl.dataNodes.forEach(node => {
      if (node.expandable && this.treeControl.isExpanded(node)) {
        this.#expandedNodes.push(node);
      }
    });
  }

  restoreExpandedNodes() {
    this.#expandedNodes.forEach(node => {
      const treeNode = this.treeControl.dataNodes.find(n => n.id === node.id);
      treeNode && this.treeControl.expand(treeNode);
    });
  }

Usage:

this.saveExpandedNodes()
this.dataSource.data = this.dataSource.splice(0,1)
this.restoreExpandedNodes()

This works ok for cases where the tree does not have many elements, but if there are dozens of nodes then this process takes from a few milliseconds to a few seconds, which does not lead to a very pleasant experience.

@GeorgianStan GeorgianStan added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Jun 28, 2024
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: cdk/tree and removed needs triage This issue needs to be triaged by the team labels Jul 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: cdk/tree feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
2 participants