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:

• 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:

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

We’ll build the template for our guide page step by step, breaking it into logical sections.

Start with the main container and the recipe name:

• <section class="guide-container"> is the main wrapper for our guide.
• <h1 id="recipe-name">{{ recipeName }}</h1> displays the recipe name, which is dynamically set by the component.

Inside the main wrapper, add the step instructions and navigation controls:

• .step-box contains the current step text and navigation buttons.
• The three buttons allow users to go to the previous step, play the current step out loud, or go to the next step (or finish).
• A keyboard hint helps users navigate with arrow keys or spacebar.
• An error message is shown if something goes wrong.

Add the timer section, which is only visible when needed:

• The timer box appears only if timerVisible is true.
• It displays a countdown timer for steps that require timing.

By breaking the template into these sections, you can more easily understand and manage each part of the guide page.

To make our page look good and work interactively, we use the component’s style and logic files.

In TypeScript frameworks, each component can have its own CSS file. You specify this in the component’s metadata:

• The styleUrl property tells the framework to use the CSS file for this component.
• This CSS file will control the look and feel of our guide page.

All interactive behavior (such as button clicks and updating the page) is handled in the component’s TypeScript file. You do not need to link separate JavaScript files in your HTML. Instead, you write methods in the component class and bind them to events in the template, like (click)="onNextStep()". This keeps your logic and structure organized together in the component.

We will implement this logic in future units.

In this lesson, you learned how to build the basic structure of a step-by-step cooking guide page using Angular components and templates. You saw how to:

• Use components to organize your code and layout.
• Add sections for the recipe name, step instructions, navigation buttons, and a timer.
• Use property bindings and event handlers to make parts of the page dynamic and interactive.
• Include styles and logic directly in your component files.

You now have a solid foundation for a guided recipe page. In the next practice exercises, you’ll get hands-on experience by building and customizing your own guide component. This will help you become more comfortable with TypeScript frameworks and prepare you for adding more advanced features in future lessons. Good luck, and have fun building!