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 later in this section.

Retrieving data as streams

So, 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 { Observable } from 'rxjs';
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...