Handle Angular 9 HTTP Requests with Observables

By Digamber Rawat Last updated on
In this Angular 8/9 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:

Git Repo

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.
— from Angular.io

JavaScript Promises VS RxJS Observables

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

Observables Promises
Lazy in nature, require subscription to be invoked. Whereas Promise is excited in nature.
Supports multiple events (from 0 to many values). Supports single event.
It could either be synchronous or asynchronous. A Promise is always asynchronous.
It could either be synchronous or asynchronous. A Promise is always asynchronous.
Observables are cancelable. A Promise is not cancelable.

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.

Operator Description
Subject A unique sort of RxJS Observable that supports a specific value to be multicasted to multiple Observers.
tap It’s an RxJS pipeable operator which is used to perform side effect such as logging each value emitted by the source Observable
switchMap It’s an RxJS operator it is widely used to get the latest value emitted by the observable.
debounceTime The debounceTime operator emits the latest value and helps in delaying the values transmitted by the root Observable for the specified time.
distinctUntilChanged Returns an observable series that carries only distinguished adjacent elements according to the key selector and the comparer.

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/9 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, we successfully achieved our goal, and i hope you learned a lot from this tutorial.

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.