Unable to create nested expandable rows with checkboxes and data using angular material

Issue1 you had to use nested in children

{{nested[key]}}

instead of

{{element[key]}}

Issure 2 It works just fine. look at his stackblitz. It marks both children and parents.

https://stackblitz.com/edit/angular-qmxvja

EDIT

since I saw second answer. I realized you might need to have checkboxes in children rows.

to do so add:

            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(nested) : null" [checked]="selection.isSelected(nested)"
            [aria-label]="checkboxLabel(nested)">
            </mat-checkbox>

in nested div.

the result is like this. https://stackblitz.com/edit/angular-rb7adw

Edit 2:

https://stackblitz.com/edit/angular-8fv2vk from what I understood this is what you want. now only ids are added in selection. children checkbox is selected on parent click now.

heres the image from result:

there is one single problem. adding this many checkboxes increases complexity of checking unchecking logic.

  selectSingle(event, row) {
    row.nested.forEach(nestedRow => {
      if (!this.selection.isSelected(row._id)) {
        if (!this.selection.isSelected(row._id)) {
          this.selection.select(nestedRow._id);
        } else {
          this.selection.select(nestedRow._id);
        }
      } else {
        if (!this.selection.isSelected(row._id)) {
          this.selection.select(nestedRow._id);
        } else {

        }
      }
    })
    this.selection.isSelected(row._id)
    return event ? this.selection.toggle(row._id) : null
  }

this is the function that decides that logic on parent click. you can twick it the way you prefer. I am not sure what logic you prefer. I put the one that sounds best from what you asked in you questions.

all expanded shows all of them are marked.

to get rid of hiphen.

change code from:

    <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()"
         [aria-label]="checkboxLabel()">
        </mat-checkbox>
    </th>

to

    <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
         [aria-label]="checkboxLabel()">
        </mat-checkbox>
    </th>

but I'm not sure if its worth it. this might or might not break something else.