Body of Http.DELETE request in Angular2

Question

I\'m trying to talk to a somewhat RESTful API from an Angular 2 frontend.

To remove some item from a collection, I need to send some other data in addition to the re

Answer 1

Below is an example for Angular 6

deleteAccount(email) {
            const header: HttpHeaders = new HttpHeaders()
                .append('Content-Type', 'application/json; charset=UTF-8')
                .append('Authorization', 'Bearer ' + sessionStorage.getItem('accessToken'));
            const httpOptions = {
                headers: header,
                body: { Email: email }
            };
            return this.http.delete<any>(AppSettings.API_ENDPOINT + '/api/Account/DeleteAccount', httpOptions);
        }

Answer 2

The http.delete(url, options) does accept a body. You just need to put it within the options object.

http.delete('/api/something', new RequestOptions({
   headers: headers,
   body: anyObject
}))

Reference options interface: https://angular.io/api/http/RequestOptions

UPDATE:

The above snippet only work for Angular 2.x, 4.x and 5.x.

For versions 6.x and 7.x, Angular offers different overloads for what you need. Check all overloads here: https://angular.io/api/common/http/HttpClient#delete

const options = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
  }),
  body: {
    id: 1,
    name: 'test',
  },
};

this.httpClient
  .delete('http://localhost:8080/something', options)
  .subscribe((s) => {
    console.log(s);
  });

Answer 3

In Angular 5, I had to use the request method instead of delete to send a body. The documentation for the delete method does not include body, but it is included in the request method.

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

this.http.request('DELETE', url, {
    headers: new HttpHeaders({
        'Content-Type': 'application/json',
    }),
    body: { foo: bar }
});

Answer 4

You are actually able to fool Angular2 HTTP into sending a body with a DELETE by using the request method. This is how:

let body = {
    target: targetId,
    subset: "fruits",
    reason: "rotten"
};

let options = new RequestOptionsArgs({ 
    body: body,
    method: RequestMethod.Delete
  });

this.http.request('http://testAPI:3000/stuff', options)
    .subscribe((ok)=>{console.log(ok)});

Note, you will have to set the request method in the RequestOptionsArgs and not in http.request's alternative first parameter Request. That for some reason yields the same result as using http.delete

I hope this helps and that I am not to late. I think the angular guys are wrong here to not allow a body to be passed with delete, even though it is discouraged.

Answer 5

The REST doesn't prevent body inclusion with DELETE request but it is better to use query string as it is most standarized (unless you need the data to be encrypted)

I got it to work with angular 2 by doing following:

let options:any = {}
option.header = new Headers({
    'header_name':'value'
});

options.search = new URLSearchParams();
options.search.set("query_string_key", "query_string_value");

this.http.delete("/your/url", options).subscribe(...)

Answer 6

Since the deprecation of RequestOptions, sending data as body in a DELETE request is not supported.

If you look at the definition of DELETE, it looks like this:

    delete<T>(url: string, options?: {
      headers?: HttpHeaders | {
         [header: string]: string | string[];
        };
      observe?: 'body';
      params?: HttpParams | {
          [param: string]: string | string[];
         };
      reportProgress?: boolean;
      responseType?: 'json';
      withCredentials?: boolean;
     }): Observable<T>;

You can send payload along with the DELETE request as part of the params in the options object as follows:

this.http.delete('http://testAPI:3000/stuff', { params: {
    data: yourData
     }).subscribe((data)=>. 
        {console.log(data)});

However, note that params only accept data as string or string[] so you will not be able to send your own interface data unless you stringify it.