63

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.

Adrita Sharma
  • 21,581
  • 10
  • 69
  • 79
Hongyang Du
  • 699
  • 1
  • 6
  • 9
  • 5
    Possible duplicate of [Body of Http.DELETE request in Angular2](https://stackoverflow.com/questions/38819336/body-of-http-delete-request-in-angular2) – Sumit Agarwal Sep 05 '17 at 07:23
  • 1
    he is asking about the new HttpClient not the old http module – Rahul Singh Sep 05 '17 at 07:24
  • but the implementation which he is seeking remains same for both the cases, try going through the link shared. – Sumit Agarwal Sep 05 '17 at 07:25
  • Take a look at this: https://angular.io/api/http/RequestOptions – Jamie Rees Sep 05 '17 at 07:26
  • I can not find a RequestOptions-Like lib in common/http. And the options in HttpClient.delete just support for:headers, observe, params(not body), reportProgress, responseType, withCredentials – Hongyang Du Sep 05 '17 at 09:49
  • @HongyangDu see the overloaded methods http://angular.io/api/common/http/HttpClient#delete – Sumit Agarwal Sep 05 '17 at 10:02
  • @SumitAgarwal Thanks Agarwal~ But the overloaded method just has the changes on responseType and observe type. There still no place for body. – Hongyang Du Sep 05 '17 at 11:16
  • 1
    for future readers - since Angular 4.3 (this includes Angular 5+) they removed the body from the delete method of angular HttpClient the alternative is to use `http.request()` like Andrii Ivanyk posted below. it was removed because the specification for Delete is unclear regarding the use of BODY in it. – Stavm Feb 08 '18 at 11:47

3 Answers3

119

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: ... })

Andrii Ivanyk
  • 1,191
  • 1
  • 6
  • 5
  • @StefanFalk probably because the "proper" way to delete stuff in a RESTful way is to have a unique URL for each unique resource (e.g.: `/clients/`). But real life APIs are seldom RESTful, unfortunately. – Joseph Tinoco Dec 06 '18 at 20:52
  • @JosephTinoco No I just mean the call itself. There could easily be a `this.http.delete()` method that wraps this s.t. the interface gets more intuitive. – Stefan Falk Dec 07 '18 at 08:43
  • 2
    @StefanFalk That's kinda my point. The "intuitive" interfaces are all RESTful, everything else is possible but only with the ugly/less intuitive `this.http.request()` method. It's like Angular is saying "if you want nice, readable code, you gotta go RESTful in the backend". – Joseph Tinoco Dec 07 '18 at 15:17
  • 1
    In Angular 9+ you will need to `this.http.request('DELETE', 'url', { body: ... })`. In my case the uppercase method string was necessary. – Michael W. Czechowski Sep 03 '20 at 11:50
31
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

mag_zbc
  • 6,801
  • 14
  • 40
  • 62
Nasreen Ustad
  • 1,564
  • 1
  • 19
  • 24
  • 8
    Not sure what version of Angular you're using, but this doesn't work in Angular 5 using the HttpClient. The typings file indicates body doesn't exist. You need to use `this.http.request` - https://stackoverflow.com/a/46316857/1148107 – mtpultz Aug 09 '18 at 23:32
2

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().

jhoepken
  • 1,842
  • 3
  • 17
  • 24
Yitim
  • 21
  • 5
  • Indeed, creating an HttpRequest with method "delete" and passing directly the body in the constructor does not work. However, it works fine with method "post" – foobar443 Dec 28 '17 at 10:47