How to change CSS on ionChange

Hey all, I’m currently working on a simple to-do list app for my assignment. I’m quite new to ionic and was wondering if it is possible to have a css change inside a typescript function?

My app currently looks like this:

What I want to achieve is a task name strikethrough once the toggle button is toggled. I have an existing function that displays a toast popup when the button is toggled but I also want to have the text become striked through.

My HTML:


<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let task of myTaskList$ | async" detail-push [navPush]="EdittaskPage" [navParams]="{taskRecord:task}">
      <ion-item>
        <ion-toggle (ionChange)="doneTask()"></ion-toggle>
        <ion-label>
          <h2><b>{{task.taskname}}</b></h2>
          <p [ngClass]="task.taskpriority">{{task.taskpriority}}</p>
        </ion-label>
      </ion-item>
    </ion-item-sliding>
  </ion-list>
</ion-content>

This is the function I’m using to create the toast message.


  doneTask(){
     this.toast.create(this.toastOptions2).present();
  }
}

Any help would be appreciated, thank you!

Apply css class to <p> based on toogle status

Also you should not need the <b> in the <h2>. Change the CSS if you want a bold font weight.