Enhancing the Guide Page

Welcome back! So far, you have built a step-by-step cooking guide page that lets users follow recipes one step at a time. You have already added basic navigation, some interactivity, and styling. In this lesson, we will focus on making the guide page even more helpful and enjoyable for users.

Why do these improvements matter? When someone is cooking, they want the process to be smooth and easy. Features like keyboard shortcuts and recipe ratings can make a big difference. They help users stay on track, move through steps quickly, and share feedback on recipes. By the end of this lesson, you will know how to add these features to your guide page.

Before we dive into the new features, let’s quickly remind ourselves of what you have already built:

• The guide page loads recipe steps from the server.
• Users can move between steps using "Prev" and "Next" buttons.
• The page uses TypeScript in a component-based framework to update the step text and handle navigation.
• There is some basic styling to make the page look nice.

All of these features are already in place. In this lesson, we will build on top of them, so you do not need to change anything that is already working.

First, let’s make it easier for users to move through the recipe steps and play instructions using their keyboard. This is especially helpful if their hands are messy from cooking!

In a TypeScript component, you can handle keyboard shortcuts by listening for keydown events at the component level. This allows you to respond to user input in a clean and organized way, without directly manipulating the DOM.

Instead of adding a global event listener, you can use a decorator in your component to listen for keyboard events. Here’s how you can do it in your TypeScript component:

// guide.component.ts

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

export class GuideComponent {
  // ... other properties and methods ...

  @HostListener('document:keydown', ['$event'])
  handleKeydown(event: KeyboardEvent): void {
    if (this.loading || this.error || !this.steps.length || this.completed) {
      return;
    }
    if (event.code === 'Space') {
      event.preventDefault();
      this.playCurrentTts();
    } else if (event.code === 'ArrowRight') {
      event.preventDefault();
      this.onNextStep();
    } else if (event.code === 'ArrowLeft') {
      event.preventDefault();
      this.onPrevStep();
    }
  }
}

• The @HostListener('document:keydown', ['$event']) decorator tells the component to listen for keydown events on the whole document.
• When the user presses the Space bar, the current step is read aloud.
• Right Arrow moves to the next step (if possible).
• Left Arrow moves to the previous step (if possible).
• The component checks its own state (such as loading, error, or completed) to decide whether to handle the event.

Explanation:

• event.preventDefault(); stops the browser from performing its default action (like scrolling).
• this.playCurrentTts(); plays the text-to-speech for the current step.
• this.onNextStep(); and this.onPrevStep(); call the component’s navigation methods.

This approach keeps your logic inside the component and makes it easy to manage keyboard shortcuts as part of your application’s state.