Angular 2: Nested Check Boxes -

i use check boxes select parent object , show check boxes a property (array) on object. example have object of products , each product has number of items. want show check list of items in product if product has been checked.

i tried following code either shows or hides items based on initial value - want able toggle check box on , off , hide or display items.

<div *ngfor="let product of products; let = index" #ref>     <md-checkbox type="checkbox"> {{product.producttitle}}</md-checkbox>     <div *ngif="ref.checked">        <div *ngfor="let item of product.items; let = index">           <md-checkbox type="checkbox">{{item.code}}</md-checkbox> - {{item.name}}        </div>     </div>  </div> 

your #ref on div , checking if checked. div never return true checked correct? need reference , check checked there.

for example (depending on how md-checkbox component configured):

<div *ngfor="let product of products; let = index">     <md-checkbox type="checkbox" #ref> {{product.producttitle}}</md-checkbox>     <div *ngif="ref.checked">        <div *ngfor="let item of product.items; let = index">           <md-checkbox type="checkbox">{{item.code}}</md-checkbox> - {{item.name}}        </div>     </div>  </div>