PUT and DELETE requests in Angular - Mini Project: Build & Apply

PUT and DELETE requests in Angular

📖 Scenario: You are building a simple Angular app to manage a list of books. You want to update book details and delete books from the list by sending requests to a server.

🎯 Goal: Build an Angular component that can send PUT requests to update a book's title and DELETE requests to remove a book from the server.

📋 What You'll Learn

Create a list of books with id and title

Add a variable to hold the API base URL

Write a method to send a PUT request to update a book's title

Write a method to send a DELETE request to remove a book by id

💡 Why This Matters

🌍 Real World

Managing data on a server is common in web apps. PUT and DELETE requests let you update and remove data remotely.

💼 Career

Understanding how to use Angular's HttpClient for PUT and DELETE requests is essential for frontend developers working with REST APIs.

1

Create the initial books list

Create a variable called books in the component class. It should be an array of objects with these exact entries: { id: 1, title: 'Angular Basics' }, { id: 2, title: 'TypeScript Guide' }, and { id: 3, title: 'RxJS in Depth' }.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent {
  // Create the books array here
}

Hint

Use an array of objects with id and title properties exactly as shown.

2

Add the API base URL

Add a string variable called apiUrl in the component class and set it to 'https://api.example.com/books'.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent {
  books = [
    { id: 1, title: 'Angular Basics' },
    { id: 2, title: 'TypeScript Guide' },
    { id: 3, title: 'RxJS in Depth' }
  ];

  // Add the apiUrl variable here
}

Hint

Just add a string variable with the exact URL given.

3

Write the method to update a book with PUT

Add a method called updateBook that takes a book object as a parameter. Inside, use Angular's HttpClient to send a PUT request to `${this.apiUrl}/${book.id}` with the book object as the body. Assume HttpClient is injected as http. The method should return the observable from http.put.

Angular

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent {
  books = [
    { id: 1, title: 'Angular Basics' },
    { id: 2, title: 'TypeScript Guide' },
    { id: 3, title: 'RxJS in Depth' }
  ];

  apiUrl = 'https://api.example.com/books';

  constructor(private http: HttpClient) {}

  // Add updateBook method here
}

Hint

Use template strings for the URL and return the observable from http.put.

4

Write the method to delete a book with DELETE

Add a method called deleteBook that takes a bookId number as a parameter. Inside, use Angular's HttpClient to send a DELETE request to `${this.apiUrl}/${bookId}`. Assume HttpClient is injected as http. The method should return the observable from http.delete.

Angular

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent {
  books = [
    { id: 1, title: 'Angular Basics' },
    { id: 2, title: 'TypeScript Guide' },
    { id: 3, title: 'RxJS in Depth' }
  ];

  apiUrl = 'https://api.example.com/books';

  constructor(private http: HttpClient) {}

  updateBook(book: { id: number; title: string }) {
    return this.http.put(`${this.apiUrl}/${book.id}`, book);
  }

  // Add deleteBook method here
}

Hint

Use template strings for the URL and return the observable from http.delete.

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