Guided Cooking Page Structure

Welcome to the first lesson of this course! In this lesson, you will learn how to create a step-by-step cooking guide page for a recipe. This type of page is a key feature in many cooking helper apps. It helps users follow a recipe one step at a time, making the cooking process easier and less overwhelming.

Imagine you are cooking a new dish. Instead of scrolling through a long list of instructions, you see only the current step, with clear navigation to move forward or backward. You might also have a timer for certain steps and even a button to read the instructions out loud. This is the experience we want to create.

By the end of this lesson, you will understand how to build the basic structure of this guide page using Angular components and templates. This will lay the foundation for adding more interactive features in future lessons.

Before we dive in, let’s quickly recall how layout and content are structured in TypeScript frameworks such as Angular. Instead of using template inheritance, these frameworks use a system of components. Each component has its own template (HTML), logic (TypeScript), and styles (CSS).

For example, you might have a main layout component that looks like this:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <main>
      <router-outlet></router-outlet>
    </main>
  `
})
export class AppComponent {}

• The template defines the HTML structure for the component.
• <router-outlet> is a placeholder where child components (pages) will be displayed.
• Each page, like the guide page, is its own component with its own template and logic.

This approach keeps your code organized and avoids repeating the same HTML structure on every page.

Let’s start building the step-by-step guide page. We’ll do this by creating a new component that contains the sections we need.

First, we define a new component for our guide page:

// guide.component.ts
import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  DestroyRef,
  inject,
  ChangeDetectorRef
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'app-guide',
  imports: [CommonModule],
  templateUrl: './guide.component.html',
  styleUrl: './guide.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GuideComponent {
  private readonly destroyRef = inject(DestroyRef);
  private readonly cdr = inject(ChangeDetectorRef);
  private timerId?: ReturnType<typeof setInterval>;
  private audio?: HTMLAudioElement;
  private recipeId?: number;

  recipeName = 'Loading...';
  steps: string[] = [];
  currentIndex = 0;
  loading = true;
  error = '';

  timerVisible = false;
  timerRemaining = 0;

  completed = false;

  constructor(
    private readonly api: ApiService,
    private readonly route: ActivatedRoute
  ) { }
  
  onPrevStep() {}
  
  playCurrentTts() {}
  
  onNextStep() {}
}

This TypeScript file defines the logic for our guide page. The component manages the recipe name, steps, current step index, loading state, and timer.