Is there a way to clear the filter of ngx-treeview component?

Question

I have a form which contains several fields, out of which the location is a tree view with filter. Whenever I am resetting the form, the entered filter value is not getting cleared. I haven't find any solutions from the publisher documents.

Anyone having a solution?

Answer 1

1. Import these items from ngx-treeview library to the component:

   import { TreeviewComponent, TreeviewConfig, TreeviewItem } from 'ngx-treeview';

2. Add this Global Variable to Typescript Code of the Component

@ViewChild(TreeviewComponent, { static: false }) treeviewComponent: TreeviewComponent;

3. In Html, For the ngx-treeview HTML Tag, bind treeviewComponent variable Declared as follows:

<ngx-treeview #treeviewComponent [config]="config" [items]="treeviewItems" (selectedChange)="onSelectedChange($event)">

4. Create a Button to Clear Filter and Bind it to a Click Event Method. In that Click Event Method, Add These Lines of Code(this is for 3 level treeviewitem list, Change it as per your code):

this.treeviewItems.forEach(level1 => { //level 1
      level1.checked = false; //unchecks checkboxes
      level1.children.forEach(level2 => { //level 2
        level2.checked = false; //unchecks children checkboxes
        level2.children.forEach(level3 => { //level 3
          level3.checked = false;
        });
      });
    });
    this.treeviewComponent.onFilterTextChange('')
    this.treeviewComponent.filterText = '';
    this.treeviewItems = [...this.treeviewItems];

On Clicking The Clear Button, It should clear Filter Input Field as well as All the Checked Checkboxes.