#18: 🗑 Removendo o item da lista
O usuário deverá ser capaz de remover qualquer item, independente de que o item esteja ativo ou de que já tenha sido completado. A remoção de um item será feita a partir do click em um botão, apropriadamente chamado de 'remover'. Neste tutorial, iremos aprender como adicionar essa funcionalidade ao nosso projeto.
Adicionando o botão "remover"
Primeiramente, precisamos adicionar o botão ao item, então iremos trabalhar no arquivo todo-item.component.ts.
Adicione um botão "remover" ao template do item, com um handler de click que chama o método removeItem (que iremos criar em breve):
Adicione uma nova saída à classe TodoItemComponent, que emitirá o item removido para o gerenciador de listas quando um usuário pressionar o botão remover:
Certifique-se de que importamos o EventEmitter e o Output em nossa classe:
Adicione um método na classe ItemComponent que realmente irá emitir o evento. Esse método será chamado quando o usuário clicar no botão remover:
Removendo o ToDo item
Agora que cada ToDo item pode emitir a sua própria remoção, vamos nos certificar de que o gerenciador da lista realmente remova este mesmo item da lista. Para isso, iremos trabalhar no arquivo list-manager.component.ts.
(a) Precisamos responder ao evento remove - vamos adicionar isso ao template, dentro da tag :
(b) Agora só precisamos adicionar o método removeItem() à classe ListManagerComponent e usar o método deleteItem, do todoListService, que irá remover o item da lista e atualizará o armazenamento local:
Last updated