Recipe Detail View

Welcome to the first lesson of our course on building the Cooking Helper frontend with TypeScript and Angular! In this lesson, we will focus on creating the Recipe Detail View as an Angular component. This page is where users will see all the important information about a specific recipe, such as its name, ingredients, steps, and a button to start cooking.

The Recipe Detail View is a key part of our Cooking Helper app. It helps users understand what they need and what to do to prepare a dish. By the end of this lesson, you will know how to build the Recipe Detail View using Angular components and TypeScript, setting a strong foundation for the rest of the course.

Let’s start building the Recipe Detail View step by step. In Angular, we use components to organize our UI. Each component has a TypeScript file for logic, a template for the view, and an optional CSS file for styles.

We want our page to show the recipe’s title, rating, ingredients, steps, and a button to start cooking.

The main content of the recipe page is defined in the component’s template file. Angular templates use special syntax to display data and handle logic.

Here’s how the template will look:

<section class="recipe-container">
  @if (recipe) {
    <h1 id="recipe-title">{{ recipe.name }}</h1>
    <p id="rating-text" class="rating">{{ ratingText }}</p>
    <h2>Ingredients</h2>
    <ul id="ingredient-list">
      @for (ingredient of recipe.ingredients; track ingredient) {
        <li>{{ ingredient }}</li>
      }
    </ul>
    <h2>Steps</h2>
    <ol id="step-list">
      @for (step of stepList; track step) {
        <li>{{ step }}</li>
      }
    </ol>
    <div class="actions">
      <a id="guide-link" [routerLink]="['/guide', recipe.id]" class="start-btn">Start Cooking →</a>
    </div>
  } @else {
    <h1>{{ loading ? 'Loading...' : 'Recipe' }}</h1>
    @if (loading) {
      <p>Fetching recipe details...</p>
    }
    @if (!loading && error) {
      <p class="error">{{ error }}</p>
    }
  }
</section>

Let’s break this down:

• @if (recipe) { ... } @else { ... } displays the recipe details if the data is loaded, or a loading/error message otherwise.
• Inside the @if, the recipe’s name, rating, ingredients, and steps are shown.
• @for (ingredient of recipe.ingredients; track ingredient) { ... } loops over the ingredients array and displays each one.
• @for (step of stepList; track step) { ... } loops over the steps array.
• The "Start Cooking" button uses Angular’s [routerLink] directive for navigation.
• The @else block handles the loading and error states.

In Angular, data flows from the component’s TypeScript file to the template using property bindings. You define properties in your TypeScript class and then reference them in the template.

Here’s an example of a basic component class:

import { Component } from '@angular/core';

@Component({
  selector: 'app-recipe',
  templateUrl: './recipe.component.html',
  styleUrl: './recipe.component.css'
})
export class RecipeComponent {
  recipe?: RecipeDetail;
  stepList: string[] = [];
  ratingText = '';
  loading = true;
  error = '';
}

• Properties like recipe, stepList, and ratingText are defined in the TypeScript file.
• The template uses these properties with {{ ... }} and the @for and @if syntax to display data.
• When the data changes in the component, the template updates automatically.

Angular keeps your styles and logic organized by scoping them to each component.

To style your component, add a CSS file and reference it in the component’s styleUrls property:

@Component({
  selector: 'app-recipe',
  templateUrl: './recipe.component.html',
  styleUrl: './recipe.component.css'
})

• The styles in recipe.component.css will only apply to this component.
• This keeps your styles modular and prevents conflicts with other parts of your app.

All the logic for loading and displaying recipe details is written in the component’s TypeScript file. You do not need to link external JavaScript files. Instead, you write your logic directly in the class, and Angular handles the rest.

For example, you might load recipe data in the constructor or with Angular’s lifecycle hooks and update the component’s properties as needed.

In this lesson, you learned how to build the Recipe Detail View in our Cooking Helper app using Angular and TypeScript. We covered how to set the page title, structure the main content with Angular templates using the @if and @for syntax, pass data from the TypeScript component to the template, and add component-specific styles.

You are now ready to practice these concepts by building and customizing your own recipe detail pages using Angular components. In the next exercises, you’ll get hands-on experience working with Angular templates and preparing your app for dynamic content. Good luck, and have fun building!