Implementar la eliminación de recursos a través de peticiones HTTP es una pieza fundamental para completar un CRUD (create, read, update y delete) en Angular. Aquí se explica paso a paso cómo construir un método delete, conectarlo con el servicio y reflejarlo en la interfaz gráfica.
¿Cómo se construye la petición DELETE en el servicio?
Para eliminar un producto solo se necesita su ID. No hace falta enviar ningún DTO ni datos adicionales como título o imagen; basta con indicarle al backend qué recurso debe borrar. [01:00]
La URL de la petición es prácticamente la misma que se usa en un get por ID. Lo que cambia es el método HTTP: en lugar de this.http.get() se utiliza this.http.delete(). Un error común —y que se muestra en la práctica— es copiar y pegar la petición get y olvidar cambiar el verbo, lo que provoca que en el network del navegador aparezca un get en vez de un delete. [04:15]
El tipado de respuesta en este caso es un boolean. La API no devuelve el producto eliminado, sino un valor true o false que confirma si la operación fue exitosa. [01:30]
¿Se necesita un DTO para eliminar?
No. A diferencia de una creación o actualización, la eliminación solo requiere el ID del elemento, que viaja directamente en la URL como parámetro de ruta. No se envía ningún payload en el cuerpo de la petición. [01:50]
¿Cómo se conecta el componente con el servicio?
Desde el componente de detalle del producto se crea un método deleteProduct() que:
- Obtiene el ID del producto seleccionado en ese momento.
- Llama al método
delete del product service pasándole ese ID.
- Se suscribe a la respuesta con
subscribe. [02:20]
Dentro del subscribe, una vez que la petición responde con éxito, se ejecutan dos acciones en la interfaz gráfica:
- Eliminar el producto del array local. Se utiliza
splice indicando la posición del elemento y la cantidad de ítems a remover (en este caso, uno). [03:05]
- Cerrar el panel de detalle. Se establece
showProduct = false para que el layout se oculte automáticamente. [03:20]
El valor data que devuelve la API (el booleano) no se utiliza directamente. Si la petición no lanza un error, se asume que la eliminación fue exitosa y se procede con la actualización visual. [03:35]
¿Qué pasa si solo se elimina de la interfaz?
Este es justo el problema que ocurre al dejar el verbo get por error. El producto desaparece de la pantalla porque el código local lo remueve del array, pero nunca se envía la orden de borrado al backend. Es decir, al recargar la página, el producto seguirá apareciendo porque sigue existiendo en la base de datos. [04:30]
Corregir el verbo a delete garantiza que la eliminación se refleje tanto en la interfaz como en el servidor.
¿Cómo verificar que la petición se ejecutó correctamente?
Usando las herramientas de desarrollo del navegador, pestaña Network, se puede inspeccionar la petición: [05:10]
- El método debe aparecer como DELETE.
- No se envía payload porque el ID va en la URL.
- El preview de la respuesta muestra un
true, confirmando que el recurso fue eliminado.
En el template se agrega un botón que dispare el método:
html
<button (click)="deleteProduct()">Delete</button>
Al hacer clic, el producto se borra del array, el panel se cierra y la petición queda registrada en el network con el verbo correcto. [05:30]
Con la implementación del delete ya se cubren las cuatro operaciones de un CRUD completo en Angular usando HttpClient. El método splice permite manipular el array en memoria, mientras que subscribe gestiona la respuesta asíncrona de la API. Recuerda siempre verificar en el network que el verbo HTTP coincida con la acción que deseas ejecutar.
¿Has tenido errores similares al copiar y pegar peticiones HTTP? Comparte tu experiencia en los comentarios.
