todo-item.component.ts
file. Place the following code right before {{ item.title }}
:click
event handler which we will call completeItem
. We'll also add a css-class and wrap the element and the interpolation together for styling. Let's do that now:completeItem
method. Let's talk about what this method needs to accomplish. We want to be able to toggle some CSS styling on the item's title so that when the checkbox is checked it will have a strikethrough. We also want to save the status of the item in the local storage. In order to achieve this, we will emit an update event with the new status of the item and catch it in the parent component.completeItem
method will toggle between true and false values, thus dictating whether a class should be applied or removed.<span>
, then use NgClass to apply the styling. Depending on current item completed field we show line-through decoration or not:todo-item.component.scss
file:removeItem
function: