Welcome back! In the last lesson, you built a step-by-step cooking guide page using a TypeScript component and its template. You set up the structure, added navigation buttons, and connected styles and logic within the component. That was a great start, but the page is still static — it doesn’t respond to user actions yet.

In this lesson, you will learn how to use TypeScript to make the guide page interactive within your component. By the end, your users will be able to move through recipe steps, hear instructions read aloud, use timers, and see updates instantly — all without reloading the page. This will make your cooking helper much more user-friendly and fun to use.

Let’s quickly remind ourselves what you built in the previous lesson. You created a Angular component with a template that shows the recipe name, the current step, and navigation buttons like Previous and Next. The template might look like this:

At this point, your component class defines the properties, but the logic for interactivity is not yet implemented.

The first thing we want to do is load the recipe name and steps from the server and display them on the page. In a Angular component, you typically fetch data in the class and bind it to the template using properties.

Here’s how you can do it:

Explanation:

• The constructor loads the steps when the component is initialized.
• The loadSteps method fetches the steps from the server using an injected ApiService.
• The template binds to recipeName and currentStepText to display the data.
• If there’s an error, the error property can be used to show a message in the template.

Output:
When the component loads, you should see the recipe name and the first step appear.

Now, let’s allow users to move between steps using the Previous and Next buttons. We’ll also make sure the Previous button is disabled on the first step, and the Next button changes to Finish on the last step.

Here’s how you can implement this in your component:

And update your template to use these methods and properties:

Explanation:

• The onPrevStep and onNextStep methods update the currentIndex property.
• The template disables the Previous button on the first step and changes the Next button to Finish on the last step.
• When the recipe is completed, a message is shown.

You can now click and to move through the steps. The button is disabled on the first step, and becomes on the last step.

We want the user to be able to hear each step read aloud. We can add a button to play the current step using a text-to-speech API.

Add this method to your component:

And add a button to your template:

Explanation:

• The playCurrentTts method creates an audio object with the current step text and plays it.
• The template provides a button to trigger this method.

If a step mentions a time (like "Bake for 10 minutes"), we want to show a countdown timer. We can implement this using component properties and methods.

Add these properties and methods to your component:

Update your navigation methods to trigger the timer:

And update your template to show the timer:

Explanation:

• The startTimerIfNeeded method checks if the step mentions a time and starts a countdown if needed.
• The stopTimer method clears any running timer.
• The updateStepEffects method is called whenever the step changes to handle TTS and timers.
• The template displays the timer when timerVisible is true.

In this lesson, you learned how to make your cooking guide page interactive using TypeScript and a component-based framework. You can now:

• Load and display recipe steps from the server using component properties.
• Move between steps with navigation methods and template bindings.
• Play step instructions out loud with a component method.
• Show a timer when a step mentions time, updating the template reactively.

Next, you’ll get to practice these features yourself. Try out the exercises to reinforce what you’ve learned and make sure you’re comfortable building interactive web pages with TypeScript!