title: Expression has changed after it was checked --> checkbox mat-tree
body: <p>I have the functionality working but when I switch the value of intermediate i get that error. Not sure if Im changing 2 observables so its like which value should i take. IDK lol! I added my code down below. If you need anything else just let me know. Any Ideas on how to solve this? Man Mat tree component is so annoying! 
  <a href="https://i.stack.imgur.com/xpJ9o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xpJ9o.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { NestedTreeControl } from '@angular/cdk/tree';
  import { Component, ChangeDetectorRef } from '@angular/core';
  import { MatTreeNestedDataSource } from '@angular/material/tree';
  import { SelectionModel } from '@angular/cdk/collections';
  
  interface ITreeNode {
      children?: ITreeNode[];
      name: string;
      expanded: boolean;
  }
  
  const TREE_DATA = [
      {
          name: 'Land Plane',
          expanded: true,
          children: [
              { name: 'Piston', expanded: true, children: [] },
              { name: 'Jet', expanded: true, children: [] },
              { name: 'Turboprop', expanded: true, children: [] }
          ]
      },
      {
          name: 'Helicopter',
          expanded: true,
          children: [
              { name: 'Piston', expanded: true, children: [] },
              { name: 'Turboprop', expanded: true, children: [] }
          ]
      },
      {
          name: 'Amphibian',
          expanded: true,
          children: [{ name: 'Turboprop', expanded: true, children: [] }]
      },
      {
          name: 'Tiltwing',
          expanded: true,
          children: [{ name: 'Turboprop', expanded: true, children: [] }]
      },
      {
          name: 'Gyrocopter',
          expanded: true,
          children: [{ name: 'Piston', expanded: true, children: [] }]
      },
      {
          name: 'Tower',
          expanded: true,
          children: []
      },
      {
          name: 'Gyrocopter',
          expanded: true,
          children: []
      }
  ];
  
  @Component({
      selector: 'globe-source-facets',
      templateUrl: './globe-source-facets.component.html',
      styleUrls: ['./globe-source-facets.component.scss']
  })
  export class GlobeSourceFacetsComponent {
      public nestedTreeControl: NestedTreeControl&lt;ITreeNode&gt;;
      public nestedDataSource: MatTreeNestedDataSource&lt;ITreeNode&gt;;
      public checklistSelection = new SelectionModel&lt;ITreeNode&gt;(true);
      constructor(private changeDetectorRef: ChangeDetectorRef) {
          this.nestedTreeControl = new NestedTreeControl&lt;ITreeNode&gt;(
              this.getChildren
          );
          this.nestedDataSource = new MatTreeNestedDataSource();
          this.nestedDataSource.data = TREE_DATA;
      }
  
      public hasNestedChild = (_: number, nodeData: ITreeNode) =&gt;
          nodeData.children.length &gt; 0;
  
      public getChildren = (node: ITreeNode) =&gt; node.children;
  
      public changeState(node) {
          node.expanded = !node.expanded;
      }
  
      descendantsAllSelected(node: ITreeNode): boolean {
          const descendants = this.nestedTreeControl.getDescendants(node);
          if (!descendants.length) {
            return this.checklistSelection.isSelected(node);
          }
          const selected = this.checklistSelection.isSelected(node);
          const allSelected = descendants.every(child =&gt; this.checklistSelection.isSelected(child));
          if (!selected &amp;&amp; allSelected) {
            this.checklistSelection.select(node);
            this.changeDetectorRef.markForCheck();
          }
          return allSelected;
        }
  
      public descendantsPartiallySelected(node: ITreeNode): boolean {
          const descendants = this.nestedTreeControl.getDescendants(node);
          if (!descendants.length) {
          return false;
          }
          const result = descendants.some(child =&gt; this.checklistSelection.isSelected(child));
          return result &amp;&amp; !this.descendantsAllSelected(node);
      }
  
      public todoItemSelectionToggle(node: ITreeNode): void {
          this.checklistSelection.toggle(node);
          const descendants = this.nestedTreeControl.getDescendants(node);
          this.checklistSelection.isSelected(node)
              ? this.checklistSelection.select(...descendants)
              : this.checklistSelection.deselect(...descendants);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="facets-container"&gt;
      &lt;div class="tree-container"&gt;
          &lt;mat-tree
              [dataSource]="nestedDataSource"
              [treeControl]="nestedTreeControl"
              class="example-tree"
          &gt;
              &lt;mat-tree-node *matTreeNodeDef="let node" disabled="true"&gt;
                  &lt;li class="mat-tree-node"&gt;
                      &lt;button mat-icon-button disabled&gt;&lt;/button&gt;
                      &lt;mat-checkbox
                          class="checklist-leaf-node"
                          [checked]="checklistSelection.isSelected(node)"
                          (change)="todoItemSelectionToggle(node)"
                          &gt;{{ node.name }}&lt;/mat-checkbox
                      &gt;
                  &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
                                          ? 'chevron_right'
                                          : 'expand_more'
                                  }}
                              &lt;/mat-icon&gt;
                          &lt;/button&gt;
                          &lt;mat-checkbox
                              *ngIf="node.name !== ''"
                              class="checklist-leaf-node"
                              [checked]="checklistSelection.isSelected(node)"
                              [indeterminate]="descendantsPartiallySelected(node)"
                              (change)="todoItemSelectionToggle(node)"
                              &gt;{{ node.name }}&lt;/mat-checkbox
                          &gt;
                      &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;
      &lt;/div&gt;
      &lt;div class="facet-actions"&gt;
          &lt;button mat-button&gt;CLEAR&lt;/button&gt;
          &lt;button mat-button color="primary"&gt;APPLY&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>