How to Make Delete Request in Angular: Simple Guide

In Angular, you make a delete request using the HttpClient service's delete() method. You call http.delete(url) where url is the API endpoint to remove data from the server.

Syntax

The delete() method of Angular's HttpClient sends an HTTP DELETE request to the specified URL.

• url: The API endpoint string where the delete request is sent.
• options (optional): An object to set headers, parameters, or observe response.

typescript

http.delete(url: string, options?: { headers?: HttpHeaders; params?: HttpParams; observe?: 'body' | 'response'; responseType?: 'json' | 'text' }): Observable<any>

Example

This example shows a simple Angular service method that deletes a user by ID from a REST API. It uses HttpClient injected in the constructor and calls delete() with the user URL.

typescript

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) {}

  deleteUser(id: number): Observable<any> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.delete(url);
  }
}

Output

No visible output; the HTTP DELETE request is sent to the server to remove the user with the given ID.

Common Pitfalls

• Forgetting to import HttpClientModule in your Angular module will cause errors.
• Not subscribing to the delete() Observable means the request will not be sent.
• Using incorrect URL or missing ID can cause server errors or delete wrong data.
• Not handling errors from the delete request can cause silent failures.

typescript

/* Wrong: No subscription, request not sent */
this.http.delete('https://api.example.com/users/1');

/* Right: Subscribe to send request and handle response */
this.http.delete('https://api.example.com/users/1').subscribe({
  next: () => console.log('User deleted'),
  error: err => console.error('Delete failed', err)
});

Quick Reference

Remember these tips when making delete requests in Angular:

• Always import HttpClientModule in your app module.
• Use http.delete(url) with the correct API endpoint.
• Subscribe to the Observable to execute the request.
• Handle errors to improve user experience.

Key Takeaways

Use Angular's HttpClient delete() method with the API URL to make delete requests.

Always subscribe to the delete() Observable to actually send the request.

Import HttpClientModule in your Angular module to enable HTTP services.

Handle errors from delete requests to avoid silent failures.

Ensure the URL includes the correct resource identifier to delete the right item.