PUT and DELETE requests in Angular - Step-by-Step Execution

Concept Flow - PUT and DELETE requests

User triggers PUT or DELETE

↓

Angular HttpClient sends request

↓

Server receives request

↓

Server processes update or deletion

↓

Server sends response

↓

Angular receives response

↓

Component updates UI accordingly

This flow shows how Angular sends PUT or DELETE requests to update or remove data on the server, then updates the UI after the server responds.

Execution Sample

Angular

updateItem(id: number, data: any) {
  return this.http.put(`/api/items/${id}`, data);
}
deleteItem(id: number) {
  return this.http.delete(`/api/items/${id}`);
}

This code sends a PUT request to update an item and a DELETE request to remove an item by ID.

Execution Table

Step	Action	Request Type	URL	Payload	Server Response	UI Update
1	Call updateItem(5, {name: 'Book'})	PUT	/api/items/5	{name: 'Book'}	200 OK, updated item data	Show updated item details
2	Call deleteItem(3)	DELETE	/api/items/3	None	204 No Content	Remove item from list
3	Call updateItem(10, {name: 'Pen'})	PUT	/api/items/10	{name: 'Pen'}	404 Not Found	Show error message
4	Call deleteItem(99)	DELETE	/api/items/99	None	404 Not Found	Show error message
5	No more calls	-	-	-	-	Execution ends

💡 No more PUT or DELETE calls; all requests processed or failed.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
id	-	5	3	10	99	-
data	-	{name: 'Book'}	-	{name: 'Pen'}	-	-
serverResponse	-	200 OK	204 No Content	404 Not Found	404 Not Found	-
uiState	Initial list	Updated item 5	Removed item 3	Error shown	Error shown	Final UI state

Key Moments - 2 Insights

Why does the UI update after the server response, not immediately after calling PUT or DELETE?

Because Angular waits for the server to confirm the update or deletion (see execution_table steps 1 and 2), ensuring the UI matches the actual server data.

What happens if the server returns 404 Not Found for a PUT or DELETE request?

The UI shows an error message (see execution_table steps 3 and 4), because the item to update or delete does not exist on the server.

Visual Quiz - 3 Questions

Look at the execution_table, what is the server response at step 2 when deleteItem(3) is called?

A 200 OK

B 204 No Content

C 404 Not Found

D 500 Internal Server Error

💡 Hint

Check the 'Server Response' column at step 2 in the execution_table.

At which step does the UI show an error message due to a failed PUT request?

A Step 3

B Step 1

C Step 4

D Step 2

💡 Hint

Look for 'Error shown' in the 'UI Update' column in the execution_table.

If the deleteItem call at step 4 succeeded, how would the UI state change?

A Show error message

B Show updated item details

C Remove item from list

D No change

💡 Hint

Compare UI updates for successful DELETE calls in the execution_table.

Concept Snapshot

PUT and DELETE requests in Angular:
- Use HttpClient.put(url, data) to update data.
- Use HttpClient.delete(url) to remove data.
- Wait for server response before updating UI.
- Handle errors like 404 to show messages.
- URLs include item IDs to target specific resources.

Full Transcript

This lesson shows how Angular sends PUT and DELETE requests to a server to update or delete data. When a user triggers an update or delete, Angular's HttpClient sends the request to the server URL with the item ID. The server processes the request and sends back a response. Angular waits for this response before changing the UI. If the server confirms success, the UI updates to show the changed or removed item. If the server returns an error like 404 Not Found, the UI shows an error message. This ensures the UI always matches the server data. The execution table traces calls to updateItem and deleteItem functions, showing request types, URLs, payloads, server responses, and UI changes step-by-step. Variable tracking shows how IDs, data, server responses, and UI state change after each step. Key moments clarify why UI waits for server response and how errors are handled. The quiz tests understanding of server responses and UI updates. The snapshot summarizes the main points for quick review.