PUT and DELETE requests in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the PUT request succeeds?

Consider this Angular component that updates a user profile using a PUT request. What will be the value of updateStatus after a successful response?

Angular

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

@Component({
  selector: 'app-user-update',
  template: `<button (click)="updateUser()">Update User</button><p>{{updateStatus}}</p>`,
  standalone: true
})
export class UserUpdateComponent {
  private http = inject(HttpClient);
  updateStatus = '';

  updateUser() {
    this.http.put('/api/users/1', { name: 'Alice' }).subscribe({
      next: () => this.updateStatus = 'Update successful',
      error: () => this.updateStatus = 'Update failed'
    });
  }
}

A An error will be thrown because PUT requests cannot be made this way.

B The text 'Update successful' will be displayed.

C Nothing will change because the PUT request does not update the status.

D The text 'Update failed' will be displayed.

💡 Hint

Think about what happens when the next callback runs in the subscription.

The updateUser method sends a PUT request. On success, the next callback sets updateStatus to 'Update successful', which updates the displayed text.

📝 Syntax

intermediate

Which option correctly sends a DELETE request with Angular HttpClient?

Choose the correct syntax to send a DELETE request to /api/items/42 using Angular's HttpClient.

A this.http.deleteRequest('/api/items/42').subscribe();

B this.http.remove('/api/items/42').subscribe();

C this.http.del('/api/items/42').subscribe();

D this.http.delete('/api/items/42').subscribe();

💡 Hint

Check the official Angular HttpClient method names for DELETE requests.

The correct method to send a DELETE request is delete. Other method names like remove, del, or deleteRequest do not exist on HttpClient.

❓ state_output

advanced

What is the value of items after deleting an item?

Given this Angular component code, what will be the value of items after deleteItem(2) is called and the DELETE request succeeds?

Angular

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

@Component({
  selector: 'app-item-list',
  template: `<ul><li *ngFor="let item of items">{{item.name}}</li></ul>`,
  standalone: true
})
export class ItemListComponent {
  private http = inject(HttpClient);
  items = [
    { id: 1, name: 'Pen' },
    { id: 2, name: 'Notebook' },
    { id: 3, name: 'Eraser' }
  ];

  deleteItem(id: number) {
    this.http.delete(`/api/items/${id}`).subscribe(() => {
      this.items = this.items.filter(item => item.id !== id);
    });
  }
}

A [{ id: 1, name: 'Pen' }, { id: 3, name: 'Eraser' }]

B [{ id: 1, name: 'Pen' }, { id: 2, name: 'Notebook' }, { id: 3, name: 'Eraser' }]

C []

D [{ id: 2, name: 'Notebook' }]

💡 Hint

Look at how the items array is updated inside the subscribe callback.

After the DELETE request succeeds, the item with id: 2 is removed from the items array using filter. So only items with ids 1 and 3 remain.

🔧 Debug

advanced

Why does this PUT request not update the server?

Examine this Angular service method. The PUT request does not update the server as expected. What is the most likely cause?

Angular

updateUser(user: any) {
  this.http.put('/api/users/' + user.id, user);
}

A The HttpClient does not support PUT requests without a body.

B The URL is incorrect because it should use backticks for string interpolation.

C The PUT request is not subscribed to, so it never executes.

D The user object is missing required headers for PUT requests.

💡 Hint

Remember how Angular HttpClient observables work when not subscribed.

Angular HttpClient methods return observables that do not execute until subscribed. Without subscribe(), the PUT request is never sent.

🧠 Conceptual

expert

What is the main difference between PUT and DELETE requests in REST APIs?

Choose the best explanation of how PUT and DELETE requests differ in RESTful web services.

A PUT replaces or updates a resource, while DELETE removes the resource entirely.

B PUT removes a resource, while DELETE updates the resource partially.

C PUT creates a new resource, while DELETE only reads resource data.

D PUT and DELETE both update resources but differ in request headers.

💡 Hint

Think about the purpose of each HTTP method in REST.

PUT is used to create or replace a resource with new data. DELETE removes the resource from the server. They serve different purposes in REST APIs.