Checkbox with ngfor

0 votes
asked Sep 11, 2017 by char

I have a component that is being for-looped. When I click one (app-product-card), I want its corresponding checkbox to be true or checked. How do I do that? I have this html

<div class="list-content fluid">
    <div class="products-cards" *ngFor="let product of dataSource['docs']">
        <div class="ui checkbox">
            <input class="singleCheckbox" type="checkbox" [checked]="product">
            <label hidden></label>
        </div>
        <app-product-card [product]="product" (click)="select(product)"></app-product-card>
    </div>
</div>

1 Answer

0 votes
answered Sep 12, 2017 by rohan-fating

You use local reference of child component like I did below:

<div class="list-content fluid">
    <div class="products-cards" *ngFor="let product of dataSource['docs']">
        <div class="ui checkbox">
            <input class="singleCheckbox" type="checkbox" [checked]="appProduct.product===product"> // Here you need match your currently selected product
            <label hidden></label>
        </div>
        <app-product-card #appProduct [product]="product" (click)="select(product)"></app-product-card>
    </div>
</div>

App Product Comp: TS

public product;

select(product){ this.product = product;}
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...