Reactive Programming with Angular and RxJS 7/

...

/

Using RxJS in Angular and Its Advantages

Using RxJS in Angular and Its Advantages

Explore the use of RxJS in Angular and its advantages.

We'll cover the following...

RxJS is a first-class citizen in Angular. It’s part of the Angular ecosystem and used in many features to handle asynchronous operations. Primarily, these include the following:

  • HTTP client module
  • Router module
  • Reactive forms
  • Event emitter
  • Async pipe

We’ll discuss each of the following concepts in the subsequent subsections.

Note: Further details about the features mentioned earlier can be found in the Angular documentation.

The HTTP client module

Angular provides the HTTP client API to communicate with the server over the HTTP. The HttpClient service is based on observables to manage all transactions. This means that the result of calling the API methods (such as GET, PATCH, POST, or PUT) is observable.

In the following code snippet, we have an example of an Angular service that injects the HttpClient service and fetches data from the server using the HttpClient.get() method.

Press + to interact
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {environment} from '@env/environment';
const BASE_PATH = environment.basePath;
@Injectable()
export class RecipesService {
    constructor(private http: HttpClient) {}
    getRecipes(): Observable < Recipe[] > {
        return this.http.get < Recipe[] > (`${BASE_PATH}/recipes/search/all`);
    }
}

The following is the content of the environment.ts file, where we define the basePath property of our backend:

Press + to interact
export const environment = {
    basePath: '/app/rest',
    production: false
};

The getRecipes() method or, to be more accurate, the call to this.http.get<Recipe('${BASE_PATH}/recipes/search') returns an observable that we should subscribe to in order to issue the GET request to the server. Please note that this is an example of an HTTP transaction, and it’s the same for all of the other HTTP methods available in the API (such as POST ...