Angular HttpClient delete() Example
March 20, 2024
HttpClient.delete() method in our Angular application. HttpClient.delete() method performs HTTP DELETE request on the server. We need to pass endpoint URL and options to configure request and response.
DELETE request may and may not have body. Using
HttpClient.delete(), we can not send body. We need to pass path parameters or query parameters to delete a resource. If we want to send DELETE request with body, we can use generic HttpClient.request() method. The successful response of DELETE request may and may not have body.
DELETE request is neither safe nor cacheable. Read-only operations are considered safe operations. DELETE request is also not allowed in HTML form.
Now let us learn to use
HttpClient.delete() method in detail to send DELETE request on server.
Contents
1. HttpClient.delete() Method Structure
HttpClient.delete() creates an Observable that when subscribed, DELETE request is executed on the server.
delete(url: string, options: {
headers?: HttpHeaders;
context?: HttpContext;
observe?: "body";
params?: HttpParams;
reportProgress?: boolean;
responseType: "json";
withCredentials?: boolean;
}): Observable<T>
url : Endpoint URL.
options : Configuration options for request and response.
Returns
delete() method returns the Observable object that when subscribed, HTTP DELETE method is executed on server.
2. Response Type
HttpClient.delete() method accepts url and options as arguments. options is optional and is used to change request and response configurations. In options, the values for observe property are body, events and response. In options, the values for responseType are json, text, arraybuffer and blob.
When observe is body, only body of response is obtained.
When observe is response, complete response is obtained.
When observe is events, response with events is obtained.
On the basis of values of
observe and responseType, HttpClient.delete() returns Observable of different objects.
Find all the overloads of
HttpClient.delete() method.
1.
delete(url, {
observe: "body",
responseType: "json",
------
}): Observable<T>
delete(url, {
observe: "body",
responseType: "json",
------
}): Observable<Object>
delete(url, {
observe: "body",
responseType: "text",
------
}): Observable<string>
delete(url, {
observe: "body",
responseType: "arraybuffer",
------
}): Observable<ArrayBuffer>
delete(url, {
observe: "body",
responseType: "blob",
------
}): Observable<Blob>
delete(url, {
observe: "events",
responseType: "arraybuffer",
------
}): Observable<HttpEvent<ArrayBuffer>>
delete(url, {
observe: "events",
responseType: "blob",
------
}): Observable<HttpEvent<Blob>>
delete(url, {
observe: "events",
responseType: "text",
------
}): Observable<HttpEvent<string>>
delete(url, {
observe: "events",
responseType: "json",
------
}): Observable<HttpEvent<Object>>
delete(url, {
observe: "events",
responseType: "json",
------
}): Observable<HttpEvent<T>>
delete(url, {
observe: "response",
responseType: "arraybuffer",
------
}): Observable<HttpResponse<ArrayBuffer>>
delete(url, {
observe: "response",
responseType: "blob",
------
}): Observable<HttpResponse<Blob>>
delete(url, {
observe: "response",
responseType: "text",
------
}): Observable<HttpResponse<string>>
delete(url, {
observe: "response",
responseType: "json",
------
}): Observable<HttpResponse<Object>>
delete(url, {
observe: "response",
responseType: "json",
------
}): Observable<HttpResponse<T>>
3. Using HttpClient.delete()
1. To useHttpClient in our Angular standalone application, configure provideHttpClient().
bootstrapApplication(AppComponent, {
providers: [
provideHttpClient(),
------
]
});
Suppose REST API for DELETE request is /api/writers and I have to delete a resource with id as 100 from the server. Using path parameter, send request as below.
constructor(private http: HttpClient) { }
deleteWriter(wid: string): Observable<string> {
return this.http.delete<string>("/api/writers/100" + wid);
}
4. Using HttpParams
To delete a resource using query parameters, useHttpParams.
deleteWriter(wid: string): Observable<string> {
const writerParams = new HttpParams().set('wid', wid);
return this.http.delete<string>('/api/writers', {
params: writerParams
});
}
5. Using HttpHeaders
To pass request headers, useHttpHeaders.
deleteWriter(wid: string): Observable<string> {
const writerParams = new HttpParams().set('wid', wid);
const writerHeaders = new HttpHeaders()
.set("Content-Type", "application/json");
return this.http.delete<string>('/api/writers', {
params: writerParams,
headers: writerHeaders
});
}
6. With Body
We can not pass body usingHttpClient.delete() method, though if we want to send request with body, use generic method HttpClient.request().
It is not good practice to send body in HTTP DELETE request. Most of the time server does not support body request and ignores it in DELETE request.
But if our server support and we want to send body, use
HttpClient.request() as below.
return this.http.request<Writer>("DELETE", '/api/writers', {
body: writer,
params: writerParams,
headers: writerHeaders
});
7. Use Credentials
To enable sending authorization header withHttpClient.delete() method, configure withCredentials: true.
return this.http.delete<string>('/api/writers', {
params: writerParams,
headers: writerHeaders,
withCredentials: true
});
8. Return HttpResponse
To get complete response from server as observable ofHttpResponse, configure observe: "response" as below.
deleteWriter(wid: string): Observable<HttpResponse<Writer>> {
const writerParams = new HttpParams().set('wid', wid);
return this.http.delete<Writer>('/api/writers', {
params: writerParams,
observe: "response",
responseType: "json"
});
}
9. Error handling
We can handle error usingHttpErrorResponse. To get full response, use observe: "response" and handle error as below.
const writerParams = new HttpParams().set('wid', wid);
this.http.delete<Writer>('/api/writers', {
params: writerParams,
observe: "response",
}).subscribe({
next: (response: HttpResponse<Writer>) => {
console.log(response.body);
},
error: (error: HttpErrorResponse) => {
if (error.status === 0) {
console.error("Error: A client-side or network error occurred.");
} else {
console.error("Error: ", error.error);
}
}
});
10. Complete Example
Find a complete code to create a method for DELETE request usingHttpClient.delete(), handling error and subscribing to the observable. HttpClient.delete() hits DELETE request only when we subscribe the observable obtained from HttpClient.delete() method.
Find the service class.
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable, catchError, throwError } from 'rxjs';
import { Writer } from '../writer';
@Injectable({
providedIn: 'root'
})
export class WriterService {
constructor(private http: HttpClient) { }
deleteWriter(wid: string): Observable<HttpResponse<Writer>> {
const writerParams = new HttpParams().set('wid', wid);
return this.http.delete<Writer>('/api/writers', {
params: writerParams,
observe: "response",
}).pipe(
catchError(this.hadnleError)
);
}
private hadnleError(error: HttpErrorResponse) {
if (error.status === 0) {
console.error("Error: A client-side or network error occurred.");
} else {
console.error("Error: ", error.error);
}
return throwError(() => new Error("An error occurred."));
}
}
import { Component, OnInit } from '@angular/core';
import { BookService } from './services/book.service';
import { CommonModule } from '@angular/common';
import { Writer } from './writer';
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
@Component({
selector: 'app-book',
standalone: true,
imports: [CommonModule],
templateUrl: './writer.component.html'
})
export class WriterComponent implements OnInit {
constructor(private bookService: BookService) { }
ngOnInit() {
this.deleteWriter('100');
}
deleteWriter(wid: string) {
this.bookService.deleteWriter(wid).subscribe({
next: (response: HttpResponse<Writer>) => {
console.log(response.body);
},
error: (error: HttpErrorResponse) => {
console.error(error);
}
});
}
}
