how to bind nested json data dropdown in angular 2

Question

i have class

 

items:[

{id:1,name:a,isChecked:false},

{id:2,name:b,isChecked:false},

{id:3,name:c,isChecked:false},

{id:4,name:d,isChecked:false},

 

from this class i got a checkbox dropdown cleanly using

 

<div *ngIf="searchTerm&&isExpanded" data-simplebar >

<div class="tab" *ngFor = "let item of items" >

<span >

{{item.name}}

</span>

<input class="checkbox" #myId type="checkbox" value="item.isChecked" [(ngModel)]="item.isChecked" (change)="ButtonClick()" >

</div>

</div>

 

.Now i want to get dropdown as parent child list with checkbox means

 

parentA []

 

child1[]

child2[]

child 3 []

 

parentB

child1

child2

child 3

 

parentC

child1

child2

child 3

 

how can i modify my class and html?

 

my exp:

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