#18: π Remove item
The user should be able to remove any item, whether it's still active or completed. Removing an item will be done by clicking a button, aptly named "remove". In this chapter, we'll learn how to add this functionality to our project.
Add the "remove" button
Add a "remove" button to the item template, with a click
event handler that calls a removeItem
method (which we'll create in a moment):
Add a new output to the ItemComponent
class, which will be emitted to the list manager when a user presses its remove button:
Make sure to import both EventEmitter
and Output
:
Add a method to the ItemComponent
class to actually emit the event. This method will be called when the user clicks the "remove" button:
Remove the todo item
We need to respond to the remove
event. Let's add it to the template, inside the <todo-item>
tag:
Now we just need to add the method removeItem()
to the ListManagerComponent
class:
Remove the todo item from local storage
Last updated