Angular 8 - GET, POST, PUT and DELETE Request with HttpClient Example

<< Back to Angular Tutorial

In this quick tutorial, we'll learn how to send HTTP GET, POST, PUT and DELETE request from Angular 8 to a backend API in our Angular 7/8 application using HttpClient module.

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 to send HTTP GET, POST, PUT and DELETE Request from Angular to a backend API, illustrating them through the evolution of a small application that you can refer from Spring Boot + Angular 8 CRUD Example Tutorial tutorial.

You can find a complete working example at Spring Boot + Angular 8 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 8 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 8 CRUD Example Tutorial.

<< Back to Angular Tutorial