Why toggle checkbox returns false?

Question

I show checkboxes on the page.

When I click over it it is changed to true/false. If true the cehckbox should be checked.

Problem is when I click first checkbox it works, when click the second I get wrong completed: false in object {id: 2, content: "CSS", completed: false}, despite checkbox is checked:

pic 1

Code is by link to stackblitz

Answer 1

Checkboxes has rather a state (checked or not), not a value. If you are changing the model value after click, use checkbox only for showing the curent state. So i would change:

[(ngModel)]="todo.completed"

to [checked]="todo.completed"