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.

Practice

1. What is the main purpose of a PUT request in Angular's HttpClient?

easy

A. To retrieve data from the server

B. To delete a resource from the server

C. To update an existing resource by sending the full new data

D. To partially update a resource

Solution

1. Step 1: Understand HTTP methods

   PUT is used to update or replace an existing resource completely.

2. Step 2: Compare with other methods

   DELETE removes data, GET retrieves data, PATCH partially updates data.

3. Final Answer:

   To update an existing resource by sending the full new data -> Option C

4. Quick Check:

   PUT updates full resource = A [OK]

Hint: PUT replaces full data, DELETE removes resource [OK]

Common Mistakes:

• Confusing PUT with DELETE
• Thinking PUT partially updates data
• Mixing GET with PUT

2. Which of the following is the correct syntax to send a DELETE request using Angular's HttpClient?

easy

A. this.http.delete('api/items/1').subscribe();

B. this.http.put('api/items/1').subscribe();

C. this.http.get('api/items/1').subscribe();

D. this.http.post('api/items/1').subscribe();

Solution

1. Step 1: Identify the method for DELETE

   Angular's HttpClient uses delete() to send DELETE requests.

2. Step 2: Check syntax correctness

   The method call this.http.delete('api/items/1').subscribe(); correctly sends a DELETE request and subscribes to the response.

3. Final Answer:

   this.http.delete('api/items/1').subscribe(); -> Option A

4. Quick Check:

   DELETE method uses http.delete() [OK]

Hint: Use http.delete() for DELETE requests [OK]

Common Mistakes:

• Using http.put() instead of http.delete()
• Forgetting to subscribe to the observable
• Using http.post() for deleting

3. Given this Angular code snippet, what will be logged after the PUT request completes successfully?

const updatedItem = { id: 5, name: 'New Name' };
this.http.put('api/items/5', updatedItem).subscribe(response => {
  console.log(response);
});

medium

A. The updated item object returned from the server

B. An error message because PUT requires no body

C. Nothing, because PUT does not return data

D. The original item before update

Solution

1. Step 1: Understand PUT request behavior

   PUT sends the full updated data and usually returns the updated resource from the server.

2. Step 2: Analyze the subscription callback

   The response logged is the server's reply, typically the updated item object.

3. Final Answer:

   The updated item object returned from the server -> Option A

4. Quick Check:

   PUT returns updated data = A [OK]

Hint: PUT usually returns updated resource in response [OK]

Common Mistakes:

• Assuming PUT returns no data
• Confusing PUT with DELETE response
• Expecting original item instead of updated

4. Identify the error in this Angular DELETE request code:

this.http.delete('api/items').subscribe(response => {
  console.log('Item deleted');
});

Assuming the API requires an item ID to delete a specific item.

medium

A. DELETE requests cannot be sent without a request body

B. The URL is missing the item ID to specify which item to delete

C. The subscribe method is missing a parameter

D. The console.log statement is incorrect

Solution

1. Step 1: Check the URL for DELETE request

   The URL 'api/items' does not specify which item to delete; an ID is needed.

2. Step 2: Understand API requirements

   APIs usually require an ID in the URL like 'api/items/1' to delete a specific item.

3. Final Answer:

   The URL is missing the item ID to specify which item to delete -> Option B

4. Quick Check:

   DELETE URL needs item ID = C [OK]

Hint: DELETE URL must include resource ID to delete [OK]

Common Mistakes:

• Sending DELETE without specifying resource ID
• Thinking DELETE needs a request body
• Ignoring subscribe callback

5. You want to update a user's profile and then delete their old profile picture in Angular. Which sequence of HttpClient calls correctly applies PUT and DELETE requests?

// Update user profile
this.http.put('api/users/10', updatedUser).subscribe(() => {
  // Delete old profile picture
  this.http.delete('api/pictures/oldPicId').subscribe(() => {
    console.log('Profile updated and old picture deleted');
  });
});

hard

A. DELETE request first to delete picture, then PUT request inside DELETE's subscribe to update profile

B. Use only PUT request to update profile and delete picture together

C. Send PUT and DELETE requests simultaneously without waiting for response

D. PUT request first to update profile, then DELETE request inside PUT's subscribe to delete picture

Solution

1. Step 1: Understand request order

   First update the user profile with PUT, then delete the old picture after success.

2. Step 2: Analyze code structure

   DELETE request is inside PUT's subscribe callback, ensuring sequential execution.

3. Step 3: Evaluate other options

   Deleting first may remove picture before profile update; simultaneous calls lack order; PUT cannot delete picture.

4. Final Answer:

   PUT request first to update profile, then DELETE request inside PUT's subscribe to delete picture -> Option D

5. Quick Check:

   Update then delete sequentially = B [OK]

Hint: Chain DELETE inside PUT subscribe for correct order [OK]

Common Mistakes:

• Deleting before updating causing data mismatch
• Sending requests simultaneously without order
• Trying to delete picture with PUT request