As a front-end application, it needs to communicate with some backend which will in turn have connection with a database. By having this communication, our front-end Angular application will POST some data, GET some data, PUT some data and DELETE some data in the backend.

Indirectly, every operation you do will always have to deal with CRUD (Create, Delete, Update, Delete) operations.

Today, we will learn about how to do the API calls in Angular application. In this tutorial, we are not using any real data to work with, but we will limit the scope till the syntax and how it works.

HttpClientModule

The HttpClientModule is the module responsible for the HTTP calls in Angular. Let's not waste any more time and we will dive into how they actually work and look like.

1. Importing HttpClientModule in app.module.ts file

Before you can use HttpClient, you need to import the Angular HttpClientModule. Most apps do so in the root AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

2. Creating a *.service.ts file

In angular, a service is a shared file that will serve as a service provider for multiple components. In simple terms, API calls are written in a service file and we will subscribe them in the respective components.

You can then inject the HttpClient service as a dependency of an application class, as shown in the following ConfigService example.

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

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

HttpClient

Performs HTTP requests. This service is available as an injectable class, with methods to perform HTTP requests. Each request method has multiple signatures, and the return type varies based on the signature that is called (mainly the values of observe and responseType).

The HttpClient service makes use of observables for all transactions. You must import the RxJS observable and operator symbols that appear in the example snippets. These ConfigService imports are typical.

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

Post API Call

Post call is used to collect some data from user and send it to backend to save it in database.

Example:

  create(product): Observable<Product> {
    return this.httpClient.post<Product>('http://localhost:3000/products/', product)

  }

In the above example, product contains the data we need to send to backend. and Product is the entity.

Put API Call

The HTTP PUT request method creates a new resource or replaces a representation of the target resource with the request payload

Example:

getById(id,product): Observable<Product> {
    return this.httpClient.get<Product>('http://localhost:3000/products/' + id , product)    
  }

Here, generally put is used to replace an existing item using its primary key or 'id'.

Get API call

GET request is use to get or retrieve the data from backend.

Example:

 getAll(): Observable<Product[]> {
    return this.httpClient.get<Product[]>('http://localhost:3000/products/')    
  }

In the above example, we are trying to get all the products from backend.

Delete API

Delete API is used to delete any data using a unique property.

Example:

delete(id){
    return this.httpClient.delete<Product>('http://localhost:3000/products/' + id)   
  }

---

This is how you use HttpClientModule in Angular.

Hope you learned something today.