how to remove item of an array when deselect the checkbox angular 4

hey 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"
    }
  ]
}],

i have mapped it on bootstrap accordion with checkboxes first there is checkbox of main object then checkboxes of array within object.

what i want is when i click on main Panel checkbox it should select the Tests checkboxes and save the panel object in object variable say selectedPanel and when i deselect the main Panel it should deselect all the Tests checkboxes too. that i can do but main thing is when i deselect one of Tests checkboxes it should be removed from selectedPanel and length also. can anyone help me in this regard?

i have created stackblitz too

Stackblitz