Integrating Signals into our recipe app

In this section, we will level up the recipe app’s reactive patterns by integrating Signals. We’ll kick things off by revisiting the data fetching use case we implemented in Chapter 3, and then see how we can adjust the implementation by using Signals in the RecipesListComponent to maximize efficiency.

Fetching data as streams using Signals

Let’s briefly review the code snippets we covered for implementing data fetching in RecipesService and RecipesListComponent.

In recipes.service.ts, we have the following code:

export class RecipesService {
  recipes$ =
    this.http.get<Recipe[]>(`${BASE_PATH}/recipes`);
  constructor(private http: HttpClient) { }
}

In recipes-list.component.ts, we have this code:

export class RecipesListComponent {
  recipes$ = this.service.recipes$;
  constructor(private service: RecipesService) {
}

Finally, in recipes...