[Fixed] How to make a checkbox checked based on its parent div clicked inside ngFor?

Issue

I have a list of checkboxes inside ngFor. Each checkbox has its own parent div. I want checkboxes to be checked once the div clicked.

Here is my code.

<div *ngFor="let option of qustions; let i = index" (click)="doCheckboxCheck()">
  <input type="checkbox" [value]="option.value">
  <span>Checkbox {{i}}</span>
</div>

Solution

You could assign an Angular template reference variable to the <input> element and toggle it’s checked property in the <div>‘s click or mouseup event.

Now this could modify the default behavior of checkbox’s own click event, so you could bind the [checked] toggle to <input> too.

<div 
  class="checkbox-container" 
  *ngFor="let option of questions; let i = index"
  (mouseup)="inputCheckbox.checked = !inputCheckbox.checked"
>
  <input
    #inputCheckbox
    class="checkbox"
    type="checkbox"
    [value]="option.value"
    (mouseup)="inputCheckbox.checked = !inputCheckbox.checked"
  >
  <span>Checkbox {{ option.value }}</span>
</div>

Working example: Stackblitz