How To Handle HTTP Requests In Angular 8 with Observables

How To Handle HTTP Requests In Angular 8 with Observables

In this post, we are going to learn how to handle asynchronous Angular 8 HTTP requests using Observable and RxJS operators.

In this Angular 8 tutorial, we are going to learn how to handle asynchronous HTTP requests using Observable and RxJS operators.

We are going to create a live country search module in an Angular app. For which we will be taking help of country list api and handle that API with RxJS observables and operators. Final output of this tutorial will look something like below.

Angular 8/9 HTTP Requests with Observables

The complete code of this tutorial can be found on given below GitHub repository:

If you are an Angular developer or might face problems using the Observables in Angular, then this tutorial will surely help you to understand the easiest way of using Observables in an Angular to manage the HTTP response.

What Does Angular Say About Observables?

Observables provide support for passing messages between publishers and subscribers in your application. Observables offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values. Angular.io

JavaScript Promises VS RxJS Observables

Let’s find out the difference between JavaScript Promises and RxJS Observables:

This is image title

Check out the detailed explanation on how to use JavaScript Promises in Angular to manage HTTP response?

Install and Configure Angular Project

Let’s start by installing a basic Angular project for the managing Http request with the observables demo app.

ng new angular-http-observables

# Would you like to add Angular routing?
# Select n and Hit Enter.

# Which stylesheet format would you like to use? (Use arrow keys)
# Choose CSS and hit Enter

Get inside the project folder:

cd angular-http-observables

To create the live search module, we will be using Bootstrap’s UI components. Run below command to install bootstrap:

npm install bootstrap

Add the bootstrap.min.css path inside styles array inside the package.json file:

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
]

Create Live Search Layout with Bootstrap

Create a live search module for the Angular Http observable demo by pasting the following code inside app.component.html file:

<div class="container">
    <form>
        <div class="form-group search-bar">
            <!-- Search -->
            <input class="form-control" placeholder="Search..." type="text">

            <!-- Progres -->
            <div class="loader">
                <div class="c-three-dots-loader"></div>
            </div>
        </div>

        <!-- Search Result -->
        <div class="list-group">
            <div class="list-group-item list-group-item-action">
                <div _ngcontent-ert-c0="" class="media"><img alt="..." class="mr-3"
                        src="https://restcountries.eu/data/cod.svg">
                    <div class="media-body">
                        <p class="mt-0">Congo (Democratic Republic of the)</p>
                    </div>
                </div>
            </div>
            <div class="list-group-item list-group-item-action">
                <div class="media"><img alt="..." class="mr-3" src="https://restcountries.eu/data/fin.svg">
                    <div class="media-body">
                        <p class="mt-0">Finland</p>
                    </div>
                </div>
            </div>
            <div class="list-group-item list-group-item-action">
                <div class="media"><img alt="..." class="mr-3" src="https://restcountries.eu/data/nru.svg">
                    <div class="media-body">
                        <p class="mt-0">Nauru</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Import HttpClientModule

HttpClient is Angular’s tool for interacting with a web server over HTTP. Make HttpClient accessible in the entire Angular app in just two simple steps.

Firstly, import it inside the AppModule. And, secondly add HttpClient in the imports array :

import { HttpClientModule } from "@angular/common/http";

@NgModule({
  declarations: [...],
  imports: [
    HttpClientModule
  ],
  providers: [...],
  bootstrap: [...]
})

export class AppModule { }

Handle Angular HTTP Service with Observable

Next, generate the app/shared/country.ts class with the following command:

export class Country {
    public name: string;
    public flag: string;
}

Then, import CountryService and also insert the Angular service in the providers array in the AppModule. It make the service available in the entire app.

import { CountryService } from './shared/county.service';

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [CountryService],
  bootstrap: [...]
})

export class AppModule { }

Next, generate the app/shared/search.service.ts using the following command:

ng generate service shared/county

Add the following code in app/shared/search.service.ts.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Country } from './country';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class CountryService {
  endpoint: string = "https://restcountries.eu/rest/v2/name/";

  constructor(private http: HttpClient) { }

  searchCountry(term: string): Observable<Country[]> {
    let url = `${this.endpoint}${term}`;
    if (!term.trim()) {
      return of([]);
    }
    return this.http.get<Country[]>(url)
      .pipe(
        catchError(this.handleError<Country[]>('countries', []))
      )
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.log(`failed: ${error.message}`);
      return of(result as T);
    };
  }

}
  • In this Angular observable tutorial we starting with importing the observable from the rxjs library.
  • We used the rest countries API https://restcountries.eu/rest/v2/name/{name} to fetch the countries list.
  • Next, inject the HttpClient module in the constructor to make the HTTP GET request.
  • Then, we bind the Observable with search(term: string) method. It takes a string, basically entered by the user and will return an observable in which every item in the observable is Country[] list type.
  • To handle the error, we declared a handleError function, and we added error handling mechanism with the rxjs pipe operator.

Managing HTTP Response with Observable and RxJS Operators

To handle the HTTP response via observable we will be using following RxJS operators.

This is image title

Next, add the following code inside the app/app.component.ts:

import { Component, OnInit } from '@angular/core';
import { CountryService } from './shared/county.service';
import { Country } from './shared/country';
import { Observable, Subject } from 'rxjs';

import {
  tap,
  switchMap,
  debounceTime,
  distinctUntilChanged
} from "rxjs/operators";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  loading: boolean = false;
  countries$: Observable<Country[]>;
  private searchTerms = new Subject<string>();

  constructor(private countryService: CountryService) { }

  search(term: string) {
    this.searchTerms.next(term);
  }

  ngOnInit(): void {
    this.countries$ = this.searchTerms.pipe(
      tap(_ => this.loading = true),
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((term: string) => this.countryService.searchCountry(term)),
      tap(_ => this.loading = false)
    )
  }

}
  • Define the countries$ observable and mapped it with Observable;
  • Inject the CountryService inside the constructor.
  • Set RxJS new Subject() with serachTerms private variable. It will emit the latest value entered by the user incorporating with search(term: string) { } method in the live country search module.
  • Now, bind the countries$ variable with the searchTerms Subject along with RxJS pipeable operator. Inside this perform, the side effect with tap method here we are setting showing the loader, especially when the user enters any value.
  • Next, we are setting the delay for 300ms after that call the distinctUntilChanged() method. Next, take the latest value by using the swithcMap() operator and call the searchCountry method in it and passed the latest value in it.
  • When the request is called, and response is returned, then make the loader hidden by setting it up to false.

Display Data with Angular Async Pipe

Add the following code inside the app/app.component.html:

<div class="container">
  <form>
    <div class="form-group search-bar">
      <!-- Search -->
      <input type="text" class="form-control" placeholder="Search..." #searchBox (input)="search(searchBox.value)">

      <!-- Progres -->
      <div class="loader" *ngIf="loading">
        <div class="c-three-dots-loader"></div>
      </div>
    </div>

    <!-- Search Result -->
    <div class="list-group">
      <div class="list-group-item list-group-item-action" *ngFor="let country of countries$ | async">
        <div class="media">
          <img src="{{country.flag}}" class="mr-3" alt="...">
          <div class="media-body">
            <p class="mt-0">{{ country.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

Lastly, we are going to display the data using the Async pipe. Let’s understand a little bit about the async pipe.

The async pipe subscribes to an Observable or Promise and gets the most recent value it has released. Async pipe signifies the component to be examined for the latest emitted value. The benefit of the Async pipe is that it unsubscribes the observable and provides memory leakage protection when the component is destroyed.

Conclusion

Finally, we have completed the Angular 8 Observables tutorial with a live country search module example. In this tutorial, we got started with a primary objective: Handling Angular HTTP response with Observables, i hope you learned a lot from this tutorial.

angular angular8 rxjs http api

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top 10 API Security Threats Every API Team Should Know

Learn what are the most important API security threats engineering leaders should be aware of and steps you can take to prevent them

What Are Good Traits That Make Great API Product Managers

What is API product management and what can you be doing to be a better API product manager — get aligned with SaaS and enterprise software requirements. This guide lays out what is API product management and some of the things you should be doing to be a good product manager.

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Consume Web API Get method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will discussed about How to Consume Web API Get method in ASP NET MVC. Blog : http://aspdotnetexplorer...

Consume Web API Post method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will discussed about how to consume Web API Get method and display records in the ASP.NET View. Here, ...