52

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
  • 17,967
  • 8
  • 40
  • 61
Hongyang Du
  • 569
  • 1
  • 5
  • 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

4 Answers4

96

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
  • 961
  • 4
  • 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
  • In Angular 9+ you will need to `this.http.request('DELETE', 'url', { body: ... })`. In my case the uppercase method string was necessary. – Michael Czechowski Sep 03 '20 at 11:50
26
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
  • 5,941
  • 14
  • 36
  • 56
Nasreen Ustad
  • 964
  • 12
  • 21
  • 7
    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,743
  • 2
  • 16
  • 22
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" – seza443 Dec 28 '17 at 10:47
0
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 });
}
shiv pandey
  • 33
  • 1
  • 5
  • 1
    This question already contains multiple answers. Can you explain (by editing your answer) where your answer differs from the other answers? Also know that Code-only answers are not useful in the long run. – 7uc1f3r Jan 18 '21 at 12:16