How to add a body to Angular HttpClient delete function

AngularAngular Httpclient

Angular Problem Overview


Our project is migrating to Angular4, and use @angular/common/http Httpclient as the default network tool. But I found there are no body params in delete function. How do I add the body to delete function? Thanks.

Angular Solutions


Solution 1 - Angular

You may use a universal request method on the HttpClient class instead. This method has the body in options. https://angular.io/api/common/http/HttpClient#members

e.g this.http.request('delete', 'url', { body: ... })

Solution 2 - Angular

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }), body: your body data
};


return new Promise(resolve => {
    this.httpClient.delete(URL, httpOptions)       
                   .subscribe(res => {     
                       resolve(res);
                   }, err => {               
                       resolve(err);
                   });
    });

by using httpOptions, you can set header and body in it. please refer this https://angular.io/tutorial/toh-pt6#delete-a-hero

Solution 3 - Angular

I also get this problem and my solution is creating a new HttpRequest of delete method, then clone this request, reset its body with your data.

let req = new HttpRequest('DELETE', 'url');
let newReq = req.clone({body: [10]});
this.http.request(newReq).subscribe((res) => {
    console.log(res);
}, (err) => {
    console.log(err);
});

The clone() is required, because the body still can not be directly set in the new HttpRequest().

Solution 4 - Angular

import { HttpClient, HttpParams } from '@angular/common/http';


constructor(private http: HttpClient) { }    


deleteItem(item: any): Observable<any> {
    let params = new HttpParams();
    params = params.append('itemId', item.itemId);
    return this.http.delete<any>(`url`, { params });
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHongyang DuView Question on Stackoverflow
Solution 1 - AngularAndrii IvanykView Answer on Stackoverflow
Solution 2 - AngularNasreen UstadView Answer on Stackoverflow
Solution 3 - AngularYitimView Answer on Stackoverflow
Solution 4 - Angularshiv pandeyView Answer on Stackoverflow