Selection model in mat-tree with checkboxes example not matching displayed selection

Bug, feature request, or proposal:

Bug in example code

What is the expected behavior?

Selection model in example should be consistent with selected items.

What is the current behavior?

When you select a parent tree item it shows up in the selection model, however if you select all of the items under a tree individually, the parent item will show as checked, but will not appear in the selection model.

What are the steps to reproduce?

see checkboxes example from documentation: https://material.angular.io/components/tree/examples or stackblitz clone: https://stackblitz.com/angular/nkmjydodvnp?file=app%2Ftree-checklist-example.html to reproduce, click checkbox for a parent tree and view selectionmodel.selected uncheck parent tree then check all child items, selection model will be different and not match display.

What is the use-case or motivation for changing an existing behavior?

To provide good examples with predictable behavior.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular material 6.02

Is there anything else we should know?

easily fixed by a small change to decendantsAllSelected method. see working fix: https://stackblitz.com/angular/nkmjydodvnp?file=app%2Ftree-checklist-example.ts code:

  descendantsAllSelected(node: TodoItemFlatNode): boolean {
    const descendants = this.treeControl.getDescendants(node);
    let allselected = descendants.every(child => this.checklistSelection.isSelected(child));
    if (allselected)
      this.checklistSelection.select(node);
    else
      this.checklistSelection.deselect(node);
    return allselected;
  }

[tipycalFlow]

This implementation seems to handle all cases:

descendantsAllSelected(node: TodoItemFlatNode): boolean {
    const descendants = this.treeControl.getDescendants(node);
    if (descendants.length === 0) {
      return this.checklistSelection.isSelected(node);
    }
    const allselected = descendants.every(child => this.checklistSelection.isSelected(child));
    if (allselected) {
      this.checklistSelection.select(node);
    } else {
      this.checklistSelection.deselect(node);
    }
    return allselected;
  }

[ShravanDurga]

Hi, i am using this but how to do two way binding.

I have saved the record from Add page, now I am building Edit page, so out of 20 check-boxes only 10 should be checked, which will come from API call.

Any idea how to do this?