How to toggle CSS with ion-checkbox

Ionic Framework ionic-v3
1

Hi all! I’m quite new to Ionic and I’m currently working on a simple to-do list app for an assignment. The app uses Firebase to store objects. What I’m trying to do is have each object have a checkbox on the right that, when clicked, changes the CSS of the task name and sets the text-decoration to line-through, and when unchecked, gets rid of this CSS. I figured the best way to achieve this would be to set a default status of ‘pending’ to each new object created. Then when the checkbox is checked the status changes to ‘done’ Then an ngClass would check and set the CSS according to the status.

This is my code in the html:

<ion-checkbox item-right (ionChange)="doneTask(task.status)"></ion-checkbox>
        <ion-label>
          <h2 [ngClass]="{'done': task.status !== 'pending'}">{{task.taskname}}</h2>
        </ion-label>

I’ve made it so that every new object has a default ‘pending’ status. I also have a TaskListService that handles the create and removal of new tasks. Should the doneTask() function then call another function in my TaskListService that will update status=‘done’? I’m a bit stuck when it comes to the functions.

Any help would be much appreciated, thanks!