title: Expand/Collapse Material Tree using data boolean (Angular 7)
body: <p>I am trying to get a Material Tree working with booleans from it's datasource. I am filtering datasource.data on input, which causes the tree to collapse every time the user inputs something. To avoid this, I would like to use a boolean in the specific row to expand/collapse the material tree. I've done this successfully with the material table, but am not able to get it working with the tree. This is what I have so far:</p>
  
  <p><strong>HTML-file:</strong></p>
  
  <pre><code>&lt;mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree"&gt;
    &lt;mat-tree-node *matTreeNodeDef="let node"&gt;
      &lt;li class="mat-tree-node"&gt;
        &lt;button mat-icon-button disabled&gt;&lt;/button&gt;
        {{node.name}}
      &lt;/li&gt;
    &lt;/mat-tree-node&gt;
  
    &lt;mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild"&gt;
      &lt;li&gt;
        &lt;div class="mat-tree-node"&gt;
          &lt;button mat-icon-button
                  [attr.aria-label]="'toggle ' + node.name"
                  click="changeState(node)"&gt;
            &lt;mat-icon class="mat-icon-rtl-mirror"&gt;
              {{node.expanded ? 'expand_more' : 'chevron_right'}}
            &lt;/mat-icon&gt;
          &lt;/button&gt;
          {{node.name}} ({{node.expanded}})
        &lt;/div&gt;
        &lt;ul [class.example-tree-invisible]="node.expanded"&gt;
          &lt;ng-container matTreeNodeOutlet&gt;&lt;/ng-container&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/mat-nested-tree-node&gt;
  &lt;/mat-tree&gt;
  </code></pre>
  
  <p><strong>TS-file:</strong></p>
  
  <pre><code>import {NestedTreeControl} from '@angular/cdk/tree';
  import {Component, Injectable} from '@angular/core';
  import {MatTreeNestedDataSource} from '@angular/material/tree';
  import {BehaviorSubject} from 'rxjs';
  
  /**
   * Json node data with nested structure. Each node has a filename and a value or a list of children
   */
  export class FileNode {
    childGroups: FileNode[];
    name: string;
    expanded: boolean;
  }
  
  /**
   * The Json tree data in string. The data could be parsed into Json object
   */
  const TREE_DATA = [
    {
    'name': 'Group 1',
    'expanded': false,
    'childGroups': [
      {
        'name': 'Childgroup 1',
        'expanded': false,
        'childGroups': []
      },
      {
        'name': 'Childgroup 2',
        'expanded': false,
        'childGroups': [
          {
            'name': 'Child of child',
            'expanded': false,
            'childGroups': []
          }
        ]
      }
      ]
    },
      {
    'name': 'Group 2',
    'expanded': false,
    'childGroups': [
      {
        'name': 'Childgroup 1',
        'expanded': false,
        'childGroups': []
      },
      {
        'name': 'Childgroup 2',
        'expanded': false,
        'childGroups': [
          {
            'name': 'Child of child',
            'expanded': false,
            'childGroups': []
          }
        ]
      }
      ]
    },
      {
    'name': 'Group 3',
    'expanded': false,
    'childGroups': [
      {
        'name': 'Childgroup 1',
        'expanded': false,
        'childGroups': []
      },
      {
        'name': 'Childgroup 2',
        'expanded': false,
        'childGroups': [
          {
            'name': 'Child of child',
            'expanded': false,
            'childGroups': []
          }
        ]
      }
      ]
    },
  ]
  
  @Component({
    selector: 'tree-nested-overview-example',
    templateUrl: 'tree-nested-overview-example.html',
    styleUrls: ['tree-nested-overview-example.css']
  })
  export class TreeNestedOverviewExample {
    nestedTreeControl: NestedTreeControl&lt;FileNode&gt;;
    nestedDataSource: MatTreeNestedDataSource&lt;FileNode&gt;;
  
    constructor() {
      this.nestedTreeControl = new NestedTreeControl&lt;FileNode&gt;(this._getChildren);
      this.nestedDataSource = new MatTreeNestedDataSource();
      this.nestedDataSource.data = TREE_DATA;
    }
  
    hasNestedChild = (_: number, nodeData: FileNode) =&gt; 
    nodeData.childGroups.length &gt; 0;
  
    private _getChildren = (node: FileNode) =&gt; node.childGroups;
  
    changeState(node) {
      console.log(node);
      node.expanded = !node.expanded;
    }
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-8pnnvo?file=app%2Ftree-nested-overview-example.ts" rel="nofollow noreferrer">Stackblitz</a></p>