Angular 11 - text-decoration: line-through does not work properly with class binding

Question

So I am making a todo app and I want to add stroke to the done tasks but the problem is that it is not working properly.

my .css file

.stroke{
    text-decoration: line-through
}

and the element in the .html file

<div *ngFor="..." [class.stroke]="task.isDone">Task Text </div>

What is happening is that whatever value isDone have at first will determine whether or not the item gets the stroke. Because when I toggle it later on, it doesn't change but it should!

This is how it looks when it is first loaded.

But when I uncheck it. The line through doesn't go away

and yes I am binding task.isDone with the checkbox

[(checked)]="task.isDone"
[class.stroke]="task.isDone"

I tried it on the latest version of chrome & latest version of Safari

Has anyone faced a similar issue with the text-decoration property?

Answer 1

Use [(ngModel)] binding.

<div *ngFor="let task of tasks" [class.stroke]="task.isDone">
  <input type="checkbox" [(ngModel)]="task.isDone" />
  {{ task.name }}
</div>

OR

With (change) event and [checked] binding.

<div *ngFor="let task of tasks" [class.stroke]="task.isDone">
  <input type="checkbox" [checked]="task.isDone" (change)="task.isDone = !task.isDone" />
  {{ task.name }}
</div>

Sample Solution on StackBlitz