Angular 2: Nested Check Boxes

Question

I would like to use check boxes to select a parent object and then only show check boxes for a a property (array) on that object. For example i have an object of products and each product has a number of items. I want to show the check list of all items in the product but only if the product itself has been checked.

I tried the following code by it either shows or hides the items based on the initial value - i want to be able to toggle the check box on and off and hide or display the items.

<div *ngFor="let product of products; let i = index" #ref>
    <md-checkbox type="checkbox"> {{product.productTitle}}</md-checkbox>
    <div *ngIf="ref.checked">
       <div *ngFor="let item of product.items; let i = index">
          <md-checkbox type="checkbox">{{item.code}}</md-checkbox> - {{item.name}}
       </div>
    </div>
 </div>

Not currently, my plan is to take the selected items and display them in a form. I can put the products into a form if that would help? — ccocker
– ccocker, Commented Jul 28, 2017 at 17:32
Do you mind posting the component code, or at least the formGroup declaration? — joshrathke
– joshrathke, Commented Jul 28, 2017 at 17:34
Maybe I misunderstood your previous comment. Your #ref is on your div and you are checking if it is checked. The div will never return true for checked correct? You need to reference your <md-checkbox> and check for checked there. — joshrathke
– joshrathke, Commented Jul 28, 2017 at 17:36
Of course - how silly of me. That actually works exactly as i was expecting it to. Late at night :-) thanks for the assistance — ccocker
– ccocker, Commented Jul 28, 2017 at 17:39

joshrathke · Accepted Answer · 2017-07-28 17:41:21Z

4

Your #ref is on your div and you are checking if it is checked. The div will never return true for checked correct? You need to reference your and check for checked there.

For example (Depending on how your md-checkbox component is configured):

<div *ngFor="let product of products; let i = index">
    <md-checkbox type="checkbox" #ref> {{product.productTitle}}</md-checkbox>
    <div *ngIf="ref.checked">
       <div *ngFor="let item of product.items; let i = index">
          <md-checkbox type="checkbox">{{item.code}}</md-checkbox> - {{item.name}}
       </div>
    </div>
 </div>

answered Jul 28, 2017 at 17:41

joshrathke

7,7847 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2: Nested Check Boxes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related