How to filter a mat-tree component Angular Material 6.0.1

Question

I\'m using mat-tree angular material component. It\'s a nice component with some very useful features like, multi-select, expand all/collapse all. I was not able to find any

Answer 1

First add an input as the filter in the view. Bind keyup event to rxjs Subject

Then query your backend to filter the tree node with keyword

this.keyEvent.pipe(
  map((e: any) => e.target.value.toLowerCase()),
  debounceTime(500),
  distinctUntilChanged(),
  switchMap((keyword: string) => {
    if (keyword && keyword.length > 2) {
      return this.yourservice.searchForData(this.entId, keyword);
    } else {
      return of();
    }
  })
)
.subscribe((r) => {
  this.nestedDataSource.data = r;
  this.nestedTreeControl.dataNodes = r;
  this.nestedTreeControl.expandAll();
});