#19: πŸ”˜ Adding a checkbox

We are now able to interact with our todo list by removing items. But what if we want to complete items and still be able to see them in our list, with a line through the todo title? Enter the checkbox!

We will look at:

  • Adding a checkbox

  • Adding functionality when you click the checkbox so that a CSS class, which adds a strikethrough style, is added to our todo items

  • Editing the todo title so that it responds to the checkbox

  • Adding a new CSS Class

Let's go ahead and add a checkbox into our item.component.ts file. Place the following code right before {{ todoItem.title }}:

item.component.ts
<input type="checkbox"/>

Now, in order for the checkbox to do anything, we need to add a click event handler which we will call completeItem. Let's do that now:

item.component.ts
<input type="checkbox"
class="todo-checkbox"
(click)="completeItem()">

When we click on the checkbox, it will run the completeItem method. Let's talk about what this method needs to accomplish. We want to be able to toggle some CSS styling on the todo title so that when the checkbox is checked, it will have a line through it, and no strikethrough line when unchecked. In order to achieve this, we will toggle a variable to be either true or false to represent checked or unchecked states. Add the following code to the ItemComponent class:

item.component.ts
isComplete: boolean = false;
​
completeItem() {
this.isComplete = !this.isComplete;
}

But wait! How is any of this going to affect the todo title when we're only touching the checkbox? Well, Angular has this wonderful directive called NgClass. This directive applies or removes a CSS class based on a boolean (true or false) expression. There are many ways to use this directive (see the NgClass directive documentation) but we will focus on using it like so:

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

The 'first' and 'second' class will be applied to the element because they are given a true value, whereas the 'third' class will not be applied because it is given a false value. So this is where our earlier code comes into play. Our completeItem method will toggle between true and false values, thus dictating whether a class should be applied or removed.

Let's wrap the item title in a <span>, then use NgClass to apply the styling:

item.component.ts
<span class="todo-title" [ngClass]="{'todo-complete': isComplete}">
{{ todoItem.title }}
</span>

And finally, add the CSS to our item.component.css file:

item.component.css
.todo-complete {
text-decoration: line-through;
}

Voila! Checking the checkbox should apply a line through the todo title, and unchecking the checkbox should remove the line.

​