how to map an array of objects which has another array to checkboxes in angular 4

I have this array of objects. In each object there is another array.

panels = [{
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Celiac test",
  Tests: [{
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 1 (DGP) IgG"
    },
    {
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 2 (DGP) IgG"
    },
    {
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 3 (DGP) IgG"
    }
  ]
}],

PS: there is no checked flag coming from backend

I have mapped it to a bootstrap accordion with checkboxes.

First there is a checkbox for the main object, then checkboxes for the array within that object.

What I want is that when I click on the main Panel checkbox it should select the Tests checkboxes and save the panel object in the object variable, say selectedPanel, and when I deselect the main Panel it should deselect all the Tests checkboxes too.

and the main thing is that when I deselect one of the Tests checkboxes it should be removed from selectedPanel but dont remove it from front-end.

Can anyone help me in this regard?

I have created a stackblitz too:

Stackblitz