Search⌘ K
Home
Courses
Reactive Programming with Angular and RxJS 7

Reactive Pattern for Fetching Data

Learn about the reactive pattern for fetching data.

We'll cover the following...

The idea behind the reactive pattern for managing unsubscriptions 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’ll declare a variable inside our service in the src/app/core/services/recipes.service.ts file.

TypeScript 3.3.4
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’re declaring the ...