Angular - HTTP DELETE Request

---

---

The HTTP standard verb DELETE can be used in the HTTP protocol to request the deletion of a specific resource (data) on the server. The purpose of the DELETE method is to ask the server to remove a particular piece of data.

In Angular, the HttpClient service class provides a delete() method to delete data on the server. Let's learn more about this method, including its signature, various options, real-time usage, etc.

Signature of the delete() Method

Following is the signature (different from syntax) of the HttpClient delete() method −

delete<T>(url: string, options?: Object): Observable<T>

Here,

• URL − The URL to which the delete request is sent.
• options − An object containing HTTP options such as headers, query parameters, etc.
• Observable<T> − The return type, where 'T' represents the expected response type.

Options

Following is a list of the available options −

• observe
• responseType
• headers
• params
• context
• reportProgress
• withCredentials
• transferCache

observe

The observe specifies which part of the response has to be observed during the server communication. Based on the observe option, either the full or part of the response will be returned as Observable. The possible values are body, events, and response.

body: Retrieves only the body content of the response from the HTTP request as Observable<R>, where R is based on the responseType option and the requested type (e.g., Expense) of data.

this.http.delete<Expense>(<url>, { 
'observe': 'body', 
'responseType' : 'json' 
})

Here,

• JSON is the format used to interprets the response body
• Expense is the requested type used to format the response body and returns as Observable<Expense>.

events: Retrieves the events fired in a response stream along with the corresponding response body as Observable<HttpEvent><R>>, where R is based on the responseType option and the requested type (e.g., Expense) of data.

this.http.delete<Expense>(<url>, { 
'observe': 'events', 
'responseType' : 'json' 
})

Here,

• JSON is the format used to interprets the response body.
• Expense is the requested type used to format the response body and returns Observable<HttpEvent<Expense>>.

response: It is used to retrieve the complete response from the HTTP request as Observable<HttpResponse<R>>, where R is based on the responseType option (which we will check in the next section) and the requested type (e.g., Expense) of data. The purpose of the HttpResponse class is to represent the complete HTTP response from the server.

this.http.delete<Expense>(<url>, { 
'observe': 'response', 
'responseType' : 'json' 
})

Here,

• JSON is the format used to interprets the response body.
• Expense is the requested type used to format the response body and returns Observable<HttpResponse<Expense>>.

responseType

The responseType is used to interpret the response body. It can have four possible values as shown below −

• arraybuffer
• blob
• text
• json

Let's understand the above options one by one:

arraybuffer: Interprets the response body as a generic raw binary data buffer and returns Observable. It can be used to stream audio/video content.

this.http.delete(<url>, { 
'observe': 'body', 
'responseType' : 'arraybuffer' 
})

blob: Interprets the response body as the binary format and returns Observable<blob>. It can be used to download large files.

this.http.delete(<url>, { 
'observe': 'body', 
'responseType' : 'blob'
})

text: Interprets the response body as plain text format and returns Observable<String>. It can be used to represent text-based data.

this.http.delete(<url>, { 
'observe': 'body', 
'responseType' : 'json'
})

JSON: Interprets the response body as JSON format and returns Observable<R>, where R is the requested type (e.g., Expense) of data. It can be used to represent the result in JSON format.

this.http.delete<Expense>(<url>, { 
'observe': 'body', 
'responseType' : 'json'
})

Based on the observe and responseType, HttpClient returns Observable with a different type variable. Let's check a few combinations of observe and responseType to better understand this concept.

• observe => body and responseType => JSON

  Returns the Observable. R represents the type variable.

• observe => response and responseType => JSON

  Returns the Observable<HttpResponse>. R represents the type variable and encodes response body.

• observe => events and responseType => JSON

  Returns the Observable<HttpEvent>. R represents the type variable and encodes the response body.

• observe => events and responseType => arraybuffer

  Returns the Observable<HttpEvent>. The response body is encoded as ArrayBuffer.

• observe => response and responseType => blob

  Returns the Observable<HttpEvent>. The Response body is encoded as ArrayBuffer.

• observe => response and responseType => text

  Returns the Observable<HttpResponse>. The Response body is encoded as ArrayBuffer.

We can combine observe and responseType to create many more combinations as necessary.

headers

Theheadersspecify the HTTP headers. It can include a standard HTTP header as a key/value pair or can encode the data in the HttpHeaders class. A sample header as a key/value pair is as follows:

{ 'Content-type': 'application/json' }

It specifies that the request content type is JSON. We can also use the HttpHeaders class provided by angular to create HTTP headers. A sample set of header information using HttpHeaders is as follows −

// create header using `HttpHeaders`
const headers = new HttpHeaders().set('content-type', 'application/json')
.set('Access-Control-Allow-Origin', '*');

this.http.delete<Expense>(<url>, { 
'observe': 'body', 
'responseType' : 'json', 
headers: headers
})

params

Theparamsrepresent the serialized request parameter in application/x-www-form-urlencoded format. It can include params as a key/value pair or can encode the data in the HttpParams class. A sample parameter as a key/value pair is as follows:

{ 'name': 'john' }

It specifies that the request param key is the name, and its value is john. We can also use the HttpParams class provided by angular to create parameters. A sample set of parameters using HttpParams is as follows −

// create parameters using `HttpParams`
const params = new HttpParams().set('name', 'john').set('age', 25)
.set('active', true;

this.http.delete<Expense>(<url>, { 
'observe': 'body', 
'responseType' : 'json', 
params: params 
})

context

Thecontextsends arbitrary values as key/value pairs with type safety and without key conflict. It is used as a source of information for interceptors acting as middle-ware between client and server. Angular provides a special class, HttpContext to encode the context information. A sample context is as follows:

// create a key using HttpContextToken
export const IS_AUTH_ENABLED = new HttpContextToken<boolean>(() => false);

// set data for the context
let authContext = new HttpContext().set(IS_AUTH_ENABLED, true)

this.http.request<Expense>('GET', <url>, { 
'observe': 'body', 
'responseType' : 'json', 
context: authContext 
})

Here,

• HttpContextToken is used to create the key along with the value type.
• IS_AUTH_ENABLED is the key, and its type is boolean.

reportProgress

The reportProgress is used to specify whether to send back the progress of the request (communication) from the server. It can be used to show the progress of large file uploads through web API:

this.http.delete<Expense>(<url>, { 
'observe': 'events', 
'responseType' : 'json', 
reportProgress: true 
})

withCredentials

The withCredentials is used to specify whether the request should be sent with outgoing credentials (cookies). It accepts the boolean value:

this.http.delete<Expense>(<url>, { 
'observe': 'body', 
'responseType' : 'json', 
withCredentials: true 
})

transferCache

ThetransferCache specifies whether the request should be cached. It accepts the boolean value or HttpTransferCacheOptions value. HttpTransferCacheOptions encode dynamic logic to filter requests to be cached based on a custom filter function and override default cache behavior:

this.http.delete<Expense>(<url>, { 
'observe': 'body', 
'responseType' : 'json', 
transferCache: true 
})

To work out the HTTP client-server communication, we need to set up a web application and need to exposes a set of web API. The web API can be requested from the client. Let us create a sample server application, Expense API App, and provide CRUD REST API (mainly DELETE requests) for expenses.

Create a Server for Expense REST API

Let's create a working angular application to put a resource into the above server application and then get all expense items from the server including the new resource by using the HttpClient service class.

Angular Sample Application

Step 1: Run the below command to create an angular application −

ng new my-http-app

Enable angular routing and CSS as shown below −

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

Step 2: Configure Http client

Let's learn how to configure the HttpClientservice. You need to import the HttpClient in App Config:

provideHttpClient(withInterceptorsFromDi())

app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    provideHttpClient(withInterceptorsFromDi())
  ]
};

Step 3: Create a new interface, Expense to show the expense items from the server −

interface Expense {
   id: Number,
   item: String,
   amount: Number,
   category: String,
   location: String,
   spendOn: Date
}

export default Expense;

Step 4: Create a new component, ListExpenses to show the expense items from the server −

ng generate component ListExpenses

It will create a new component as shown below −

CREATE src/app/list-expenses/list-expenses.css (0 bytes)
CREATE src/app/list-expenses/list-expenses.html (28 bytes)
CREATE src/app/list-expenses/list-expenses.spec.ts (602 bytes)
CREATE src/app/list-expenses/list-expenses.ts (229 bytes)

Step 5: Include our new component into the App root component view, app.component.html as shown below −

<app-list-expenses></app-list-expenses>
<router-outlet></router-outlet>

Step 6: Inject the HttpClient into the ListExpenses component through the constructor as shown below −

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

@Component({
   selector: 'app-list-expenses',
   imports: [],
   templateUrl: './list-expenses.html',
   styleUrls: ['./list-expenses.css']
})
export class ListExpenses {

   constructor(private http: HttpClient) { }
}

Step 7: Implement the OnInit life cycle hook to request the server for expenses after the initialization of the ListExpenses component −

export class ListExpenses implements OnInit{
   constructor(private http: HttpClient) { }   
   ngOnInit(): void {
   
   }
}

Step 8: Create a local variable, expenses to hold our expenses from the server −

export class ListExpenses implements OnInit{
   expenses: Expense[] = [];   
   constructor(private http: HttpClient) { }   
   ngOnInit(): void {   
   }
}

Step 9: Create a local variable, a newexpense to hold the new expense created in the server −

export class ListExpenses implements OnInit{
   expenses: Expense[] = [];
   newexpense: Expense | null = null;   
   constructor(private http: HttpClient) { }   
   ngOnInit(): void {
   
   }
}

Step 10: Call the get method of this.http (HttpClient instance) object by passing the list expenses URL and options and getting the expense object from the server. Then, set the expenses into our local variable, expenses −

export class ListExpenses implements OnInit {
   expenses: Expense[] = [];
   newexpense: Expense | null = null;   
   constructor(private http: HttpClient) { }   
   ngOnInit(): void {
      this.http.get<Expense[]>('http://localhost:8000/api/expense',
     {
	    'observe': 'body',
        'responseType': 'json'
     }).subscribe( data => {
         this.expenses = data as Expense[]
         console.log(this.expenses)
     })
   }
}

Here,

• Sets the Expense[] as the type of the object returned by the server. The server will send the array of expense objects along with a new expense object in its body in the JSON format.
• Subscribed to the request (this.http.get) object. Then parsed the subscribed data as an array of expense objects, and set it to a local expense variable (this.expenses).

Step 11: Add a new delete method and call thedelete()method of this.http (HttpClient instance) object by passing the delete URL −

export class ListExpenses implements OnInit {
   expenses: Expense[] = [];
   newexpense: Expense | null = null;
   constructor(private http: HttpClient) { }   
   delete(id? : Number) : void {
      if (id) {
         this.http.delete<Expense>('http://localhost:8000/api/expense/' + id,{
            'observe': 'body',
            'responseType': 'json'
         }).subscribe( data => {
            console.log(data)
            this.http.get<Expense[]>('http://localhost:8000/api/expense',{
               'observe': 'body',
               'responseType': 'json'
            }).subscribe( data => {
                this.expenses = data as Expense[]
                console.log(this.expenses)
            })
         });
      }
   }   
   ngOnInit(): void {
      this.http.get<Expense[]>('http://localhost:8000/api/expense',{
         'observe': 'body',
         'responseType': 'json'
      })
      .subscribe( data => {
         this.expenses = data as Expense[];
         console.log(this.expenses);
      })
   
   }
}

Step 12: Next, get the expenses list object and render it in our component template page (list-expenses.component.html). Also, add an anchor tag for each expense and set the delete method by passing the corresponding expense ID −

<div><h3>Expenses</h3></div>
<ul>
   @for(expense of expenses; track $index;){
   <li>
      {{expense.item}} @ {{expense.location}} for {{expense.amount}} USD on {{expense.spendOn | date:'shortDate' }} <a href="delete(expense.id)">delete</a>
   </li>
   }
</ul>

Here,

• When the user clicks the delete link, it will call the delete expense endpoint and delete the expense from the server.

Step 13: The complete code of the ListExpenses is as follows −

list-expenses.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpRequest, HttpResponse, HttpEvent, HttpParams } from '@angular/common/http';
import Expense from '../Expense';

@Component({
  selector: 'app-list-expenses',
  imports:[],
  templateUrl: './list-expenses.html',
  styleUrls: ['./list-expenses.css']
})
export class ListExpenses implements OnInit {
   expenses: Expense[] = [];
   newexpense: Expense | null = null;
   constructor(private http: HttpClient) { }
   ngOnInit(): void {
      var spend_date = new Date();
      spend_date.setDate(spend_date.getDate() - 1);
      this.newexpense = {
         'item': 'new item ' + Math.floor(Math.random() * 10),
         'amount': Math.floor(Math.random() * 100),
         'category': 'Food',
         'location': 'KFC',
         'spendOn': spend_date
   }
   this.http.delete<Expense>('http://localhost:8000/api/expense/1',
   this.newexpense,{
      'observe': 'body',
      'responseType': 'json'
   }).subscribe( data => {
         this.newexpense = data as Expense;
         console.log(data)
      });   
   this.http.get<Expense[]>('http://localhost:8000/api/expense',{
      'observe': 'body',
      'responseType': 'json'
   }).subscribe( data => {
        this.expenses = data as Expense[]
        console.log(this.expenses)
     });
   }
}

Step 14: Finally, run the application using the below command −

ng serve

Step 15: Open the browser and navigate to http://localhost:4200/ URL and check the output −

Here, the output shows our expenses as a list of items except item 1.

Conclusion

Angular provides an easy way to send data to the server through the HttpClient object.delete()is a specific method used to send data to the server. We will learn more HTTP methods to target other HTTP verbs in the upcoming chapters.

Multiple Choice Questions (MCQ's):

Here we have mentioned a few MCQs to test your knowledge on the current concept: