Components: mat-tree should have a filtering feature

[ajaysattikar]

Feature request, or proposal:

Filtering through tree nodes is a very useful feature, especially to reduce the size of tree and finding out the desired node(s) quickly.

What is the expected behavior?

There should be an input box above mat-tree. As you enter the text, it will filter through the tree and renders the tree based on the content in the input box.

What is the current behavior?

Filtering feature is not available in mat-tree component.

[mfatiho]

I tried to create a solution myself on the link below. It can help those who need it.

stackblitz sample

[rojagadeesh]

I tried to create a solution myself on the link below. It can help those who need it.

stackblitz sample

@mehfatih - You applied filter successfully applied to Mat-tree and works fine. But when I click checkbox and remove the filtertext, then the checked values are missing.

[hugocalheira]

The filter could work like this one: https://angular2-tree.readme.io/docs/filtering

[BobaFett58]

@rojagadeesh any solutions for this?

[rojagadeesh]

No, I didn't found any solution how to apply filter to mat-tree

[NaveenMysuru]

solution given by Mr.mehfatih works well for linear tree data. but it fails to track node path while searching in nested tree data like in official documentation examples.

[abchugh]

+1 this would be really useful

[shantd9]

Indeed, this would be very useful

[Hartaxfr]

Need it too

[wilhelmmi]

No solutions so far? Struggling with this issue too...

[shirlebel]

I wrote this recursive function that implements search in nested tree and it works.
It gets a root node, and returns a tree that includes the searched nodes, all searched nodes' descendants, and the direct path of the forefathers:

`
//gets a tree root and returns a NEW tree root includes only nodes relevant to the "searchedText"
//will return a tree that includes the searched nodes, all searched nodes' descendants, and the direct path of the forefathers
private filterTreeRecursion(searchedText: string, node: Node): Node {
// if node's name includes the searched string - returns it
if (node.item.toLowerCase().includes(searchedText.toLowerCase())) {
return node;
}

//if not - continue to check for it's children
if (node.children && node.children.length > 0) {
  let newParentNode: Node = {
    children: [],
    item: node.item,
    id: node.id,
    pid: node.pid,
    showIcons: node.showIcons,
    data: node.data,
    character: node.character,
  }

  //going through all node's children
  for (let i = 0; i < node.children.length; i++) {
    let resNode = this.filterTreeRecursion(searchedText, node.children[i]);
    if (resNode !== undefined) {
      newParentNode.children.push(resNode); //if there is a result, it's asearched node or a forefather of the searched node - so we add it
    }
  }

  if (newParentNode.children.length > 0) {
    return newParentNode;
  }
}

}
`

[vickyadi3]

@shirlebel , Where can i put this function, because when I add my in this example it saying node.childern is undefined.

[shirlebel]

@shirlebel , Where can i put this function, because when I add my in this example it saying node.childern is undefined.

Notice that the function starts with "private filterTreeRecursion(searchedText: string, node: Node)" (it's outside the marked square)
and check your node structure, if it doesn't have the children field you need to change it to your field

[Darius123]

i would love to have this feature

[Gagulo]

You may take a look Here

[JoaoPortella]

You may take a look Here

WOW!

[miladSorour]

+1

[tmushayahama]

Anything on this?