HTTP DELETE Requests

HTTP DELETE requests are used to remove resources from a server. In Angular, the HTTPClient module provides methods to make DELETE requests and handle responses efficiently.

Setting Up HTTPClientModule

First, import the HttpClientModule into your app module:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DataService } from './data.service';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating a Service

Next, create a service to manage HTTP requests using the Angular CLI command:

$ ng generate service data

This command generates a new service file named data.service.ts.

Implementing the DELETE Request

In the service file, inject the HttpClient and create a method to perform the DELETE request:

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  deletePost(id: number): Observable {
    const url = `${this.apiUrl}/${id}`;
    return this.http.delete(url);
  }
}

Using the DELETE Request in a Component

Inject the service into your component's constructor and use it to perform the DELETE request:

// home.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-home',
  template: `
    Posts
    
      {{ post.title }} 
        
      
    
  `
})
export class HomeComponent implements OnInit {
  posts: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getPosts().subscribe(data => {
      this.posts = data;
    });
  }

  onDelete(id: number) {
    this.dataService.deletePost(id).subscribe(() => {
      this.posts = this.posts.filter(post => post.id !== id);
    });
  }
}

Handling Errors in DELETE Requests

To handle errors in your HTTP DELETE requests, use the catchError operator from RxJS:

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  deletePost(id: number): Observable {
    const url = `${this.apiUrl}/${id}`;
    return this.http.delete(url).pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    console.error('Server Error:', error);
    return throwError('Something went wrong with the request.');
  }
}

Key Points

HTTP DELETE requests are used to remove resources from a server.
Import HttpClientModule in your app module to set up the HTTP Client.
Create a service to handle HTTP DELETE requests using the HttpClient.
Inject the service into your component's constructor to use it for performing HTTP DELETE requests.
Handle errors using the catchError operator from RxJS.

Conclusion

HTTP DELETE requests are essential for removing resources from a server. By setting up the HTTPClientModule and using the HTTPClient to perform DELETE requests, you can efficiently manage data deletion in your Angular applications. Happy coding!