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


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>


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.

  *ngFor="let option of questions; let i = index"
  (mouseup)="inputCheckbox.checked = !inputCheckbox.checked"
    (mouseup)="inputCheckbox.checked = !inputCheckbox.checked"
  <span>Checkbox {{ option.value }}</span>

Working example: Stackblitz

Leave a Reply

(*) Required, Your email will not be published