PUT and DELETE requests in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to send a PUT request using Angular's HttpClient.

Angular

this.http.[1]('https://api.example.com/items/1', updatedItem).subscribe(response => {
  console.log('Item updated', response);
});

Drag options to blanks, or click blank then click option'

Aput

Bpost

Cget

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'post' instead of 'put' for updating data.

Using 'get' which only retrieves data.

The put method sends a PUT request to update data on the server.

2fill in blank

medium

Complete the code to send a DELETE request to remove an item.

Angular

this.http.[1]('https://api.example.com/items/1').subscribe(() => {
  console.log('Item deleted');
});

Drag options to blanks, or click blank then click option'

Aput

Bdelete

Cpost

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'post' or 'put' instead of 'delete' to remove data.

Using 'get' which only fetches data.

The delete method sends a DELETE request to remove data from the server.

3fill in blank

hard

Fix the error in the code to correctly send a PUT request with HttpClient.

Angular

this.http.[1]('https://api.example.com/items/1', updatedItem).subscribe(response => {
  console.log('Updated', response);
});

Drag options to blanks, or click blank then click option'

Apost

Bget

Cdelete

Dput

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the data argument in PUT request.

Using 'post' or 'get' instead of 'put'.

The PUT request requires both the URL and the data to update. The method is put.

4fill in blank

hard

Fill both blanks to send a DELETE request and handle the response.

Angular

this.http.[1]('https://api.example.com/items/1').subscribe({
  next: () => console.log('Deleted'),
  error: ([2]) => console.error('Error', [2])
});

Drag options to blanks, or click blank then click option'

Adelete

Berr

Cerror

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'post' or 'put' instead of 'delete'.

Using a generic name like 'response' for the error parameter.

Use delete to send the request and a variable like err to catch errors.

5fill in blank

hard

Fill all three blanks to send a PUT request with updated data and handle success and error.

Angular

this.http.[1]('https://api.example.com/items/1', updatedItem).subscribe({
  next: ([2]) => console.log('Success', [2]),
  error: ([3]) => console.error('Failed', [3])
});

Drag options to blanks, or click blank then click option'

Aput

Bresponse

Cerror

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'delete' instead of 'put' for updating.

Confusing the names of success and error parameters.

Use put to update data, and name the success and error parameters clearly.