IONIC - 3.6 Creation of a to do list (2)

Click here for more videos available on our youtube channel !

We continue the to-do list project on our HTML page. On the checkbox at line 22, we add an (ionChange) binding that calls a method to know whether a task has been ticked or not. Concretely we write (ionChange)="onCheck($event, task)", without forgetting to pass the event and the current task as parameters.

Just below, on the <h4> element that displays the task title, we add an *ngIf="task.isChecked" so the title is shown when the task is checked, and we duplicate the line with *ngIf="!task.isChecked" using the exclamation mark for the case where the task is not checked yet. This lets us style the title differently based on its state.

Removing a task with the trash icon

At line 27, the trash icon should remove its task when clicked, so we add a (click) binding that calls a delete function on the component. In home.page.ts, we create the onCheck method that receives the event and the task, and updates the isChecked state from event.detail.checked:

onCheck(event: any, task: any) {
  task.isChecked = event.detail.checked;
}

To remove a task, we add a second method deleteTask that uses splice on the array to take out the right entry:

deleteTask(i: number) {
  this.tasks.splice(i, 1);
}

The splice(i, 1) call says: starting at index i, remove exactly one element. Once the bindings and methods are in place, we can add tasks like "do the dishes" or "go shopping" and then click on the trash icon to delete each one. The list updates immediately on screen.

That is it for this part of the to-do list built with Ionic — congratulations, you can be proud of the result. We will see you in the next video to continue and improve the project.