Eliminar elemento
El usuario debería ser capaz de eliminar cualquier elemento, así esté activo o completo. Eliminar un elemento puede ser hecho dand click en un botón llamado "eliminar". En este tutorial, vamos a aprender como añadir esta funcionalidad a nuestro proyecto.
Archivo: item.component.ts
Primero, necesitamos añadir el botón al elemento, entonces vamos a trabajar en el archivo item.component.ts
Añade un evento (click) el botón
remove
en la plantilla:Agrega un nuevo
Output
a la claseItemComponent
, el cual se emitirá alist-manager
cuando el usuario presione el botónremove
en un evento específico:Asegúrate de importar
EventEmitter
yOutput
en tu clase:Agrega una función a la clase
ItemComponent
la cual emitirá e evento. Esta función será llamada cuando el usuario de click en el botónremove
:
Archivo: list-manager.component.ts
Ahora que cada elemento puede emitir su propia eliminación, vamos a asegurarnos de que list manager en realidad elimine el mismo elemento de la lista. Para eso, vamos a trabajar en el archivo list-manager.component.ts
.
Necesitamos responder al evento remove, vamos a añadir en la plantilla, dentro de la etiqueta
<todo-item>
:Vamos a necesitar una función llamada
removeItem()
en la claseListManagerComponent
:
Archivo: todo-list.service.ts
Eliminar el elemento es manejado en el servicio, abre todo-list.service.ts
y añade una función llamada removeItem()
a la clase TodoListService:
Esta función llama al método destroy()
que ya creamos en todo-list-storage.service.ts anteriormente.
Last updated