Angular 9 HttpClient - GET, POST, PUT and DELETE Request Example

Author:
In this quick tutorial, we'll learn how to send HTTP GET, POST, PUT and DELETE requests from Angular 9 to a backend REST API in our Angular 9 application using HttpClient module.
We'll be seeing an example snippets of common HTTP methods such as GET, PUT, PATCH, POST and DELETE, that you usually need to use when communicating with a server, or consuming and fetching data from a REST API server.

The Angular HttpClient Module Overview

Most front-end applications communicate with backend services over the HTTP protocol. Modern browsers support two different APIs for making HTTP requests: the XMLHttpRequest interface and the fetch() API.
The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. Additional benefits of HttpClient include testability features, typed request and response objects, request and response interception, Observable APIs, and streamlined error handling.
Read more about HttpClient at https://angular.io/guide/http.

Quick Implementation Steps

Below are the quick steps you need to follow in order to send HTTP GET, POST, PUT and DELETE requests from Angular to a backend API.
  1. Include and add the HttpClientModule to the imports array of your AppModule
  2. Import the HttpClient into Angular Service and add it to the constructor() params.
  3. Using HttpClient to send HTTP GET, POST, PUT and DELETE Request from Angular to a backend API
This tutorial covers the steps required to send HTTP GET, POST, PUT and DELETE Request from Angular application to a backend REST API, illustrating them through the evolution of a small application that you can refer from Spring Boot + Angular 9 CRUD Example Tutorial tutorial.
You can find a complete working example at Spring Boot + Angular 9 CRUD Example Tutorial.

1. Include and add the HttpClientModule to the imports array of your AppModule

Before you can use the new HttpClient module in your Angular 9 application, you need to add it to the imports array in the application main module. 
Start by importing the HttpClientModule module from the @angular/common/http package:
import { HttpClientModule } from '@angular/common/http';
Next, add the HttpClientModule module to the imports array of the AppModule:
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ]
Here is the complete code:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CreateEmployeeComponent } from './create-employee/create-employee.component';
import { EmployeeDetailsComponent } from './employee-details/employee-details.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,
    CreateEmployeeComponent,
    EmployeeDetailsComponent,
    EmployeeListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Import the HttpClient into Angular Service and add it to the constructor() params.

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

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private baseUrl = 'http://localhost:8080/springboot-crud-rest/api/v1/employees';

  constructor(private http: HttpClient) { }
}

3. Using HttpClient to send HTTP GET, POST, PUT and DELETE Request from Angular to a backend API

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

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private baseUrl = 'http://localhost:8080/springboot-crud-rest/api/v1/employees';

  constructor(private http: HttpClient) { }

  getEmployee(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`);
  }

  createEmployee(employee: Object): Observable<Object> {
    return this.http.post(`${this.baseUrl}`, employee);
  }

  updateEmployee(id: number, value: any): Observable<Object> {
    return this.http.put(`${this.baseUrl}/${id}`, value);
  }

  deleteEmployee(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`, { responseType: 'text' });
  }

  getEmployeesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }
}
You can find a complete working example at Spring Boot + Angular 9 CRUD Example Tutorial.

References

Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours

Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course

Comments

Post a Comment