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

Question

here i am trying to create a nested expandable table from flat json

what i did :

below is flat json :

           public unsortedData = [
  {
    "url": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
    "_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
    "part": "wing",
    "main": "boeing",
    "part_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
    "information.data_check": "ad1bd2a7-710d-88aa-6da0-8de2140417c6"
  },
  {
    "url": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "part": "wing",
    "main": "boeing",
    "part_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "information.data_check": "parent_info"
  },
  {
    "url": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "_id": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "part": "wing",
    "main": "boeing",
    "part_id": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "information.data_check": "single_info"
  }
];

and converted it to the nested json like below :

[
  {
    "nested": [
      {
        "url": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
        "_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
        "part": "wing",
        "main": "boeing",
        "part_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
        "information.data_check": "ad1bd2a7-710d-88aa-6da0-8de2140417c6"
      }
    ],
    "url": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "part": "wing",
    "main": "boeing",
    "part_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
    "information.data_check": "parent_info"
  },
  {
    "url": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "_id": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "part": "wing",
    "main": "boeing",
    "part_id": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
    "information.data_check": "single_info"
  }
]

and it came like below

Issue: 1. In the expandable rows the parent data is again repeated instead of displaying the child (which is there in under nested).

2. Although implemented checkbox selection for all rows but it has been effected for only for parent not to the child so need to select all the rows in the table and get their ids

Im not sure what is causing the issue below is my stackblitz:--> https://stackblitz.com/edit/angular-wsdvgd

Answer 1

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.