Displaying Recipe Details

In the last lesson, you built the HTML template for the Recipe Detail View in your Cooking Helper app. Right now, your page is still static — it doesn’t show any real recipe data yet.

In this lesson, you’ll focus on using TypeScript in your Angular component to fetch recipe details from your backend and display them on the page. This will make your Recipe View interactive and dynamic, so users can see real recipe information.

By the end of this lesson, you’ll know how to:

• Get recipe data from your backend using TypeScript and Angular services
• Update the page with the recipe’s title, rating, ingredients, and steps using Angular’s template syntax
• Handle errors if something goes wrong

The main job of your component’s TypeScript class is to fetch data and provide it to the template. In Angular, you typically use a service to handle HTTP requests. Here’s how you can fetch recipe data and handle loading and error states.

First, inject the ApiService and ActivatedRoute:

constructor(
  private readonly api: ApiService,
  private readonly route: ActivatedRoute
) {
  this.loadRecipeFromRoute();
}

This constructor sets up your component to use two services:

• ApiService lets you make HTTP requests to your backend to get recipe data.
• ActivatedRoute gives you access to information about the current route, such as the recipe ID in the URL. It calls a function called loadRecipeFromRoute() that we will implement later.

We call a method in the constructor to subscribe to route changes and fetch the recipe:

private loadRecipeFromRoute(): void {
  this.route.paramMap
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe((params) => {
      const id = Number(params.get('id'));
      if (Number.isNaN(id)) {
        this.error = 'Invalid recipe.';
        this.loading = false;
        this.recipe = undefined;
        this.stepList = [];
        this.cdr.markForCheck();
        return;
      }
      this.fetchRecipe(id);
    });
}

• Uses takeUntilDestroyed(this.destroyRef) to automatically unsubscribe when the component is destroyed.
• Calls this.cdr.markForCheck() after updating state to ensure the UI updates.

Create a method to fetch the recipe details from your backend. Use the ApiService to make the HTTP request, and handle loading and error states:

private fetchRecipe(id: number): void {
  this.loading = true;
  this.error = '';
  this.recipe = undefined;
  this.stepList = [];

  this.api
    .getRecipeDetail(id)
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe({
      next: (data) => {
        this.recipe = data;
        this.stepList = data.steps
          .split('\n')
          .map((step) => step.trim())
          .filter(Boolean);
        this.loading = false;
        this.cdr.markForCheck();
      },
      error: () => {
        this.error = 'Error loading recipe.';
        this.loading = false;
        this.cdr.markForCheck();
      }
    });
}

First, we set loading to true to show a loading indicator in the UI, clear any previous error messages and resets the recipe and step list. Next, we call getRecipeDetail(id) on the ApiService to fetch the recipe data for the given ID:

• We use .pipe(takeUntilDestroyed(this.destroyRef)) to automatically unsubscribe when the component is destroyed.
  • On success (next):
    • Stores the recipe data in this.recipe.
    • Splits the steps string into an array, trims whitespace, and removes empty lines for easier display.
    • Sets loading to false and calls markForCheck() to update the UI.
  • On error:
    • Sets an error message, turns off the loading indicator, and updates the UI.

You may need to process some data before displaying it. For example, split the steps string into an array for easier rendering:

stepList: string[] = [];

And add a getter for the rating text:

get ratingText(): string {
  if (!this.recipe) {
    return '';
  }
  return this.recipe.average_rating
    ? `⭐ Average rating: ${this.recipe.average_rating}`
    : 'Not yet rated';
}

ratingText is a getter that returns a formatted string for the recipe’s average rating.

• If there is no recipe loaded, it returns an empty string.
• If the recipe has an average rating, it shows the rating with a star.
• If not, it shows "Not yet rated".

Once your component has the recipe data, Angular’s template binding will automatically update the page. You already set up the HTML in the previous lesson, so you just need to make sure your component provides the right data:

• recipe.name for the title
• ratingText for the rating
• recipe.ingredients for the ingredients list
• stepList for the steps
• recipe.id for the guide link

• Use Angular services and TypeScript to fetch recipe data from your backend
• Handle loading and error states in your component
• Prepare data (like splitting steps) before passing it to the template
• The template you built earlier will automatically update when the component’s data changes

You’re now ready to make your Recipe Detail View dynamic and interactive!