Exploring the reactive pattern for fetching data

The idea behind this reactive pattern is to keep and use the Observable as a stream throughout the application. Don’t worry – this will become more apparent to you as you explore this section. Let’s get started.

Retrieving data as streams

To start using the reactive pattern, instead of defining a method to retrieve our data, we will declare a variable inside our service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Recipe } from '../model/recipe';
import { environment } from 'src/environments/environment';
const BASE_PATH = environment.basePath
@Injectable({
providedIn: 'root'
})
export class RecipesService {
recipes$ = this.http.get<Recipe[]>(
`${BASE_PATH}/recipes`);
constructor(private http: HttpClient) { }
}

Here, we are declaring the recipes$ variable as the result of HTTP GET, which...