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.

Summary

This lesson completes the Ionic to-do list project by implementing the delete task functionality. The instructor covers HTML checkbox integration to track task status, event handling to capture user interactions, and the splice method to remove tasks from the list. A live demo shows adding tasks and deleting them via a trash icon.

Key points

  • Use the isChecked property on checkboxes to determine if a task has been entered or modified
  • Implement click event listeners on the delete icon to trigger the removal of tasks
  • Use the splice() method with proper parameters to remove items from the task array
  • Verify task status with boolean checks and conditional rendering in the template
  • Test the complete workflow by adding multiple tasks and confirming deletion works correctly

FAQ

How do you check the status of a checkbox input in Ionic?

Use the isChecked property in your TypeScript component, typically accessed through event.detail.checked when handling change events.

What does the splice() method do in this to-do list context?

The splice() method removes items from the task array. The parameters specify the starting index and how many items to remove, effectively deleting a task when the user clicks the delete icon.

How is the delete functionality triggered in the UI?

A click event listener is attached to a trash icon in the template. When clicked, it calls the delete method in the TypeScript component, passing the task reference for removal.